kostenloser Webspace werbefrei: lima-city

Scroll-Link

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   y*******s

   16:25, 27.6.2011

   Moin, moin, alle web publisher dort draußen!
   Ich könnte eine ergänzung für meiner homepage gut gebrauchen:
   und zwar einen 'Scroll-Link' mit den man zu absätzen gelangen kann.
   Weiß irgend jemand wie man sowas codet?
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. alfr3d

   alfr3d hat kostenlosen Webspace.

   16:28, 27.6.2011

   Ich weiß nicht ob ich es jetzt richtig verstanden hab, aber du könntest das mit Ankern machen:
   Mit
   

   <a href="#absatz1">zu Absatz 1</a>

   definierst du den Link, den man anklicken kann um zum gewünschten Absatz zu kommen.
   Und mit
   

   <a name="absatz1" />

   bestimmt man den Punkt an den gesprungen werden soll!
   
   Ich hoffe das war was du suchst.
   
   Beitrag zuletzt geändert: 27.6.2011 16:30:21 von alfr3d

4. s*************h

   16:33, 27.6.2011

   Nein ich glaube er möchte das so machen wie du es beschrieben hast aber die Seite muss dynamisch nach unten oder oben scrollen. Ich habe hier mal ein Beispiel und hier ein Tutorial dazu. Ich hoffe ich hatte die richtige Vermutung und hoffe das ich dir damit weiterhelfen konnte.
   
   Gruß S.Brosch

5. fabo

   fabo hat kostenlosen Webspace.

   17:59, 27.6.2011

   Möglichkeiten gibts hier tatsächlich einige. Zum Beispiel dieses "bisschen" Javascript:
   
   

   var ss = {
     fixAllLinks: function() {
       var allLinks = document.getElementsByTagName('a');
       for (var i=0;i<allLinks.length;i++) {
         var lnk = allLinks[i];
         if ((lnk.href && lnk.href.indexOf('#') != -1) && 
             ( (lnk.pathname == location.pathname) ||
   	    ('/'+lnk.pathname == location.pathname) ) && 
             (lnk.search == location.search)) {
           ss.addEvent(lnk,'click',ss.smoothScroll);
         }
       }
     },
   
     smoothScroll: function(e) {
       if (window.event) {
         target = window.event.srcElement;
       } else if (e) {
         target = e.target;
       } else return;
   
       if (target.nodeName.toLowerCase() != 'a') {
         target = target.parentNode;
       }
     
       if (target.nodeName.toLowerCase() != 'a') return;
     
       anchor = target.hash.substr(1);
       var allLinks = document.getElementsByTagName('a');
       var destinationLink = null;
       for (var i=0;i<allLinks.length;i++) {
         var lnk = allLinks[i];
         if (lnk.name && (lnk.name == anchor)) {
           destinationLink = lnk;
           break;
         }
       }
       if (!destinationLink) destinationLink = document.getElementById(anchor);
   
       if (!destinationLink) return true;
     
       var destx = destinationLink.offsetLeft; 
       var desty = destinationLink.offsetTop;
       var thisNode = destinationLink;
       while (thisNode.offsetParent && 
             (thisNode.offsetParent != document.body)) {
         thisNode = thisNode.offsetParent;
         destx += thisNode.offsetLeft;
         desty += thisNode.offsetTop;
       }
   
       clearInterval(ss.INTERVAL);
     
       cypos = ss.getCurrentYPos();
     
       ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
       ss.INTERVAL =
   setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
   
       if (window.event) {
         window.event.cancelBubble = true;
         window.event.returnValue = false;
       }
       if (e && e.preventDefault && e.stopPropagation) {
         e.preventDefault();
         e.stopPropagation();
       }
     },
   
     scrollWindow: function(scramount,dest,anchor) {
       wascypos = ss.getCurrentYPos();
       isAbove = (wascypos < dest);
       window.scrollTo(0,wascypos + scramount);
       iscypos = ss.getCurrentYPos();
       isAboveNow = (iscypos < dest);
       if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
         window.scrollTo(0,dest);
         clearInterval(ss.INTERVAL);
         location.hash = anchor;
       }
     },
   
     getCurrentYPos: function() {
       if (document.body && document.body.scrollTop)
         return document.body.scrollTop;
       if (document.documentElement && document.documentElement.scrollTop)
         return document.documentElement.scrollTop;
       if (window.pageYOffset)
         return window.pageYOffset;
       return 0;
     },
   
     addEvent: function(elm, evType, fn, useCapture) {
       if (elm.addEventListener){
         elm.addEventListener(evType, fn, useCapture);
         return true;
       } else if (elm.attachEvent){
         var r = elm.attachEvent("on"+evType, fn);
         return r;
       } else {
         alert("Handler could not be removed");
       }
     } 
   }
   
   ss.STEPS = 75;
   ss.addEvent(window,"load",ss.fixAllLinks);

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?