Scroll-to-position Script anpassen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bruderjakob82

Mitglied
7 Januar 2015
30
1
8
37
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:
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
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.141
456
83
Berlin
Das Click-Event um den Button ergänzen:
statt:
Code:
menuItems.click(function(e){ ... }
so etwas:
Code:
$("#top-menu a, #meinBackButton").click(function(e){ ... }
 

bruderjakob82

Mitglied
7 Januar 2015
30
1
8
37
Ich habe noch etwas anderes vor und frage nicht, ob das mit dem obigen Script nicht auch möglich ist.
Wäre es möglich, dass wenn man über einem Div scrollt, er automatisch einrastet?
Ich habe mehrere Divs hintereinander, zwischen denen ich mit dem Menü hin und her scrolle.
Die Höhe der Divs ist immer 100%. Und ich finde es nicht so schön, wenn man dann so halb zwischen den Divs hin und her scrollt. Daher die Frage, kann man die Scroll-Position auf bei einem Divs einrasten lassen? Und beim nächsten Sroller scrollt er direkt zum nächsten?
 

bruderjakob82

Mitglied
7 Januar 2015
30
1
8
37
Hallo Sempervivum,
1000 Dank für deine Versuch mein Problem zu lösen.
Ich habe in der Zwischenzeit herausgefunden, dass der Effekt den ich meine wohl Panelsnap heißt.
Hier gibt es ein Script dafür. http://guidobouman.github.io/jquery-panelsnap/
Lässt sich dieser Effekt auch durch kleine Anpassungen mit meinem obigen Script lösen? Dort sind ja auch schon Teile des Panelsnap enthalten, also erkennen der Anker, weiches Scrollen …
Oder wäre es einfacher, dieses Panelsnap von der Seite einzubinden?
 
S

Sempervivum

Guest
Hm, als ich das fiddle entwickelt habe, hatte ich mir dein Skript noch gar nicht angesehen. Leider steige ich da nicht vollständig durch, aber ich bin der Meinung, dass es möglich sein sollte, die Scroll-Position so zu berechnen, dass das div so zu liegen kommt, wie Du es möchtest. Machst Du das hiermit nicht schon?:
Code:
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+60;
Woran scheitert es?
Kannst Du vielleicht mal die URL deiner Seite posten?
 
Zuletzt von einem Moderator bearbeitet:

bruderjakob82

Mitglied
7 Januar 2015
30
1
8
37
Ich habe mal ein halbwegs entschlackte Seite hochgeladen.
Was ist nun genau erreichen möchte, ist der Part mit den roten Bereichen.
Wenn ich an denen vorbei scrolle, sollen die automatisch und smooth so scrollen, dass der rote Verlauf oben unter der Menüleiste beginnt. Wenn dann weiter gescrollt wird, soll er automatisch zum nächsten Verlauf scrollen.
http://www.herrfreund.de/temp/index.html
 

bruderjakob82

Mitglied
7 Januar 2015
30
1
8
37
Ja aber ist das auch ohne Click möglich? Dass es automatisch die Position korrigiert und an den Anfang eines DIVs scrollt?
 
S

Sempervivum

Guest
Das hatte ich auch erst gedacht, aber das wirft einige Probleme auf: Beim Scrollen gibt die Position des Sliders immer die Position des Content an. Man kann die Position des Content nicht anders als die Position des Sliders festlegen. Würde man mit dem Skript die Scroll-Positon des Content anpassen, würde der Slider sich weg bewegen. Außerdem: Wenn das Script die Scrollposition anpasst, wird auch wieder das onscroll-Event getriggert. Du stellst dir sicher vor, dass man rechts scrollt und dass sich unabhängig von der Position des Sliders die Position des Content ändert. Aber das ist leider nicht möglich.
Und zum Scrollen muss man ja auf jeden Fall auf den Slider klicken.
 
S

Sempervivum

Guest
PS: U. U. ist es doch möglich, die Position des Content unabhänig von der Position des Sliders festzulegen: Man müsste dazu den Content absolut positionieren. Wird aber IMO zu kompliziert und unübersichtlich.
 
Werbung:

Latest posts