SubNavi aus Ankern mit sanftem scrollen
Hallo,
ich stehe gerade vor einem großen Problem.
Ich habe eine Webseite mit nur sehr wenigen Unterseiten. Jede Unterseite ist nach dem OnePage-Prinzip ausgebaut.
Die Navigation sollte ursprünglich so funktionieren, dass nur die HauptSeiten angeklickt werden können.
Nun ist der Plan aber so, dass es eine SubNavigation geben soll, mit der man zu den Ankern der Seite springen kann.
Zusätzlich soll die Seite sanft scrollen, wenn man auf der gleichen Seite zu einem Anker springt.
Das 1. Problem:
Ich habe die Navi manuell mit html gebaut und als Modul ins Seitenlayout eingebunden.
Hier mal ein Auszug:
HTML-Code:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Unternehmen <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="page-scroll" href="{{link_url::42}}#top">Willkommen</a></li>
<li><a class="page-scroll" href="{{link_url::42}}#AnkerPartnerAlle">Partner</a></li>
<li><a class="page-scroll" href="{{link_url::42}}#AnkerKontaktAlle">Kontakt</a></li>
</ul>
</li>
Das 2. Problem
Durch den Aufbau der Links
HTML-Code:
<a class="page-scroll" href="{{link_url::42}}#top">Willkommen</a></li>
funktioniert das sanfte scrollen auf der Webseite nicht.
Das Script für das sanfte scrollen sieht folgendermaßen aus:
Code:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Wenn ich den Link ohne den insert tag schreibe, funktioniert das sanfte scrollen einwandfrei. Dann müsste ich aber die Navigation für jede Unterseite manuell bauen.
Wie kriege ich es hin, dass das Script für das sanfte scrollen die insert tags in den Links akzeptiert?
