This approach follows the principles of unobtrusive DHTML, making it easy for everyone to use. For the solution to work, the script needs to be run by something; we put the code from our first step (looping over the links to find those that are internal) into a function ss_fixAllLinks(), and bind that to the window’s onload event using Scott Andrew’s function:
ss_addEvent(window,"load",ss_fixAllLinks);
The whole code looks like this:
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); Your document internal links will scroll to their destination, allowing your users to retain an awareness of where the browser is located within the document, and how far they are from their starting point. The code has been tested and works in Mozilla, IE, and Opera; it doesn’t work in Konqueror, and is assumed to not work in other browsers.
Implementing smooth scrolling in JavaScript involves using the window.scrollTo method. This method takes two arguments: the x-coordinate and the y-coordinate to which the window should scroll. To make the scrolling smooth, you can use the behavior property and set it to ‘smooth’. Here’s a simple example:
window.scrollTo({
top: 0,
behavior: 'smooth'
});
This code will smoothly scroll the window to the top of the page.
Yes, you can use JavaScript to scroll to a specific element on the page. You can do this by first selecting the element using a method like document.querySelector, and then using the scrollIntoView method on the selected element. Here’s an example:
var element = document.querySelector('#myElement');
element.scrollIntoView({behavior: 'smooth'});
This code will smoothly scroll the window to the element with the id ‘myElement’.
The smooth scrolling feature in JavaScript is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s not supported by Internet Explorer. You can check the compatibility table on the MDN Web Docs for the most up-to-date information.
The speed of the smooth scrolling is determined by the browser and cannot be directly controlled with JavaScript. However, you can create a custom smooth scrolling function with a set speed by using the window.requestAnimationFrame method.
You can implement smooth scrolling for anchor links by adding an event listener for the ‘click’ event on the links. In the event handler, you can prevent the default action of the link, which is to instantly navigate to the target element, and instead use the scrollIntoView method to smoothly scroll to the target element. Here’s an example:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
This code will add smooth scrolling to all anchor links on the page.
Yes, you can add a scroll offset when using smooth scrolling with JavaScript. You can do this by subtracting the desired offset from the y-coordinate in the scrollTo method or the top property in the scrollIntoView method.
Yes, you can use jQuery to implement smooth scrolling. jQuery provides the animate method, which you can use to animate the scrollTop property of the html and body elements. Here’s an example:
$('html, body').animate({
scrollTop: $("#myElement").offset().top
}, 2000);
This code will smoothly scroll the window to the element with the id ‘myElement’ over a period of 2 seconds.
Yes, you can implement smooth scrolling with CSS by using the scroll-behavior property. You can set this property to ‘smooth’ on the html or body element to enable smooth scrolling for the whole page. However, this method has less browser support than the JavaScript method.
You can test if smooth scrolling is working correctly by simply trying to scroll on your page. If the scrolling is smooth and not instant, then it’s working correctly. You can also use the developer tools in your browser to inspect the scroll behavior.
Yes, you can disable smooth scrolling with JavaScript by simply not using the behavior property in the scrollTo or scrollIntoView methods, or by setting it to ‘auto’. This will make the scrolling instant instead of smooth.
The above is the detailed content of Make Internal Links Scroll Smoothly with JavaScript. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
