Hallo,
ich bastel gerade an der Webseite für unser Schulradio herum. Diese ist als One-Pager aufgebaut. Oben ein ganz simples Menü, welches mittles Ankern gesteuert wird. Zudem hab ich einen "Smooth-Effekt" mit Java eingebaut (da ich mich so gut wie gar nicht mit Java auskenne, ist der Code von einer anderen Seite kopiert, funktioniert aber einwandfrei). Wenn ich jetzt oben im Menü z.B. auf Unser Team klicke, scrollt die Seite automatisch nach unten und die URL hat sich nicht verändert (also noch immer example.com statt example.com/#unserteam).
Allerdings hat jedes Team-Mitglied eine eigene Unterseite. Auf jeder Unterseite befindet sich natürlich ein "Zurück zur Startseite"-Button. Der Link dazu ist dann hier example.com/#unser-team, damit der Benutzter nicht gleich wieder hinuterscrollen muss, sondern gleich beim Team-Abschnitt ist.
Nun zu meinem Problem: Wie schon angesprochen werden die Anker auf der Home-Seite in der URL durch den Java-Code unterdrückt. Wenn ich aber von einer Unterseite wieder zu einem Anker auf Home-Seite gelange, steht der Anker in der URL. Wie kann ich das unterdrücken?
Schon mal vielen Dank im Voraus!
pappkarton
===========================================================
Code (generell):
<!DOCTYPE html>
<html>
<head>
<!--Meta-Daten-->
<meta charset="UTF-8">
<!--Styles-->
<link rel="stylesheet" href="css/sytle.css">
<!--Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="js/smooth.js"></script>
</head>
<body>
<div class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#unserteam">Unser Team</a></li>
<li><a href="#sendungen">Sendungen</a></li>
</div>
<div id="home">
<div class="logo"><img src="bilder/logo_weiss.png" height="300px"><br /></div>
<div class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="unserteam">
<div class="titel">Unser Team</div>
<div class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="sendungen">
<div class="titel">Sendungen</div>
<div class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
===========================================================
Code (Smooth-Effekt):
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({ scrollTop: target.offset().top -50 }, 900);
return false;
}
}
});
});
