Machen Sie interne Links reibungslos mit JavaScript scrollen

Dieser Ansatz folgt den Prinzipien eines unauffälligen DHTML, was es für jeden leicht macht. Damit die Lösung funktioniert, muss das Skript von etwas ausgeführt werden. Wir haben den Code aus unserem ersten Schritt (über die Links überschreiten, um diejenigen zu finden, die intern sind) in eine Funktion ss_fixalllinks () () in eine Funktion eingerichtet werden, und binden diesen Onload -Ereignis des Fensters mithilfe von Scott Andrews Funktion:

ss_addEvent(window,"load",ss_fixAllLinks);

Der gesamte Code sieht so aus:

function ss_fixAllLinks() {   

  // Get a list of all links in the page   

  var allLinks = document.getElementsByTagName('a');   

  // Walk through the list   

  for (var i=0;i
    var lnk = allLinks[i];   

    if ((lnk.href && lnk.href.indexOf('#') != -1) &&    

        ( (lnk.pathname == location.pathname) ||   

    ('/'+lnk.pathname == location.pathname) ) &&    

        (lnk.search == location.search)) {   

      // If the link is internal to the page (begins in #)   

      // then attach the smoothScroll function as an onclick   

      // event handler   

      ss_addEvent(lnk,'click',smoothScroll);   

    }   

  }   

}   

   

function smoothScroll(e) {   

  // This is an event handler; get the clicked on element,   

  // in a cross-browser fashion   

  if (window.event) {   

    target = window.event.srcElement;   

  } else if (e) {   

    target = e.target;   

  } else return;   

     

  // Make sure that the target is an element, not a text node   

  // within an element   

  if (target.nodeType == 3) {   

    target = target.parentNode;   

  }   

     

  // Paranoia; check this is an A tag   

  if (target.nodeName.toLowerCase() != 'a') return;   

     

  // Find the  tag corresponding to this href   

  // First strip off the hash (first character)   

  anchor = target.hash.substr(1);   

  // Now loop all A tags until we find one with that name   

  var allLinks = document.getElementsByTagName('a');   

  var destinationLink = null;   

  for (var i=0;i
    var lnk = allLinks[i];   

    if (lnk.name && (lnk.name == anchor)) {   

      destinationLink = lnk;   

      break;   

    }   

  }   

     

  // If we didn't find a destination, give up and let the browser do   

  // its thing   

  if (!destinationLink) return true;   

     

  // Find the destination's position   

  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;   

  }   

     

  // Stop any current scrolling   

  clearInterval(ss_INTERVAL);   

     

  cypos = ss_getCurrentYPos();   

     

  ss_stepsize = parseInt((desty-cypos)/ss_STEPS);   

  ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);   

     

  // And stop the actual click happening   

  if (window.event) {   

    window.event.cancelBubble = true;   

    window.event.returnValue = false;   

  }   

  if (e && e.preventDefault && e.stopPropagation) {   

    e.preventDefault();   

    e.stopPropagation();   

  }   

}   

   

function ss_scrollWindow(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)) {   

    // if we've just scrolled past the destination, or   

    // we haven't moved from the last scroll (i.e., we're at the   

    // bottom of the page) then scroll exactly to the link   

    window.scrollTo(0,dest);   

    // cancel the repeating timer   

    clearInterval(ss_INTERVAL);   

    // and jump to the link directly so the URL's right   

    location.hash = anchor;   

  }   

}   

   

function ss_getCurrentYPos() {   

  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;   

}   

   

function ss_addEvent(elm, evType, fn, useCapture)   

// addEvent and removeEvent   

// cross-browser event handling for IE5+,  NS6 and Mozilla   

// By Scott Andrew   

{   

  if (elm.addEventListener){   

    elm.addEventListener(evType, fn, useCapture);   

    return true;   

  } else if (elm.attachEvent){   

    var r = elm.attachEvent("on"+evType, fn);   

    return r;   

  }   

}    

   

var ss_INTERVAL;   

var ss_STEPS = 25;   

   

ss_addEvent(window,"load",ss_fixAllLinks);

einpacken

Ihr Dokument interne Links scrollen zu ihrem Ziel, sodass Ihre Benutzer ein Bewusstsein dafür behalten können, wo sich der Browser innerhalb des Dokuments befindet und wie weit sie von ihrem Ausgangspunkt entfernt sind. Der Code wurde getestet und arbeitet in Mozilla, dh und Oper. Es funktioniert nicht in Konqueror und wird in anderen Browsern nicht funktioniert.

häufig gestellte Fragen (FAQs) zum reibungslosen Scrollen mit JavaScript

Wie kann ich ein reibungsloses Bildlauf in JavaScript implementieren? Diese Methode nimmt zwei Argumente an: die X-Koordinate und die Y-Koordinate, zu der das Fenster scrollen soll. Um das Scrollen glatt zu machen, können Sie die Verhaltenseigenschaft verwenden und auf „glatt“ einstellen. Hier ist ein einfaches Beispiel:

Fenster. Auf der Seite. Sie können dies tun, indem Sie zuerst das Element mithilfe einer Methode wie document.querySelector und dann mit der Scrollintoview -Methode im ausgewählten Element auswählen. Hier ist ein Beispiel:

var element = document.querySelector ('#myelement'); In JavaScript wird die meisten modernen Browser unterstützt, darunter Chrome, Firefox, Safari und Edge. Es wird jedoch nicht vom Internet Explorer unterstützt. Sie können die Kompatibilitätstabelle in den MDN-Webdokumenten auf die aktuellsten Informationen überprüfen. Sie können jedoch eine benutzerdefinierte reibungslose Scrolling -Funktion mit einer festgelegten Geschwindigkeit erstellen, indem Sie das Fenster verwenden.

Wie kann ich ein reibungsloses Bildlauf mit JavaScript für Ankerlinks implementieren? Im Ereignishandler können Sie die Standardaktion der Link verhindern, die sofort zum Zielelement navigieren und stattdessen mit der Scrollintoview -Methode zum Zielelement sanft. Hier ist ein Beispiel:

document.querySelectorAll ('a [href^= "#"]'). document.querySelector (this.getAtTribute ('href')). Scrollintoview ({
Verhalten: 'glatte'
});
});
}); JavaScript? Sie können dies tun, indem Sie den gewünschten Offset vom Y-Koordinaten in der Scrollto-Methode oder der oberen Eigenschaft in der Scrollintoview-Methode subtrahieren. JQuery bietet die Animate -Methode, mit der Sie die Scrolltop -Eigenschaft der HTML- und Körperelemente animieren können. Hier ist ein Beispiel:

$ ('HTML, Body'). Animate ({
scrolltop: $ ("#myelement"). Offset (). von JavaScript? Sie können diese Eigenschaft auf das HTML- oder Körperelement auf „glatt“ einstellen, um eine reibungslose Scrollen für die gesamte Seite zu ermöglichen. Diese Methode hat jedoch weniger Browser -Unterstützung als die JavaScript -Methode. Wenn das Scrollen glatt und nicht sofort ist, funktioniert es richtig. Sie können auch die Entwickler -Tools in Ihrem Browser verwenden, um das Bildlaufverhalten zu inspizieren. Dadurch wird der Scrollen sofort statt glatt.

Das obige ist der detaillierte Inhalt vonMachen Sie interne Links reibungslos mit JavaScript scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!