bruderjakob82
Mitglied
Hallo zusammen,
ich baue gerade eine kleine Website in der ich mit JS ein Menü gebaut habe, in der bei Klick (weich) zu einem bestimmten DIV gescrollt wird. Das Script dafür habe ich aus Tutorials gefischt.
Im Menü klappt auch alles. Nun möchte ich aber einen Back-to-top Button in die Website einbauen, der halt nicht in der Menüleiste ist, aber trotzdem auf die Funktion zugreift. Und hier hören meine Fähigkeiten auf, da ich nicht weiß, wie ich das ändern soll.
Hier ist das JS:
Hoffe mir kann jemand helfen.
Vielen Dank im voraus
ich baue gerade eine kleine Website in der ich mit JS ein Menü gebaut habe, in der bei Klick (weich) zu einem bestimmten DIV gescrollt wird. Das Script dafür habe ich aus Tutorials gefischt.
Im Menü klappt auch alles. Nun möchte ich aber einen Back-to-top Button in die Website einbauen, der halt nicht in der Menüleiste ist, aber trotzdem auf die Funktion zugreift. Und hier hören meine Fähigkeiten auf, da ich nicht weiß, wie ich das ändern soll.
Hier ist das JS:
Code:
<!--Scroll to position //////////////////////////////////////////////-->
$(window).load(function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+100,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+60;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 1000);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
});
Hoffe mir kann jemand helfen.
Vielen Dank im voraus