这种方法遵循不引人注目的DHTML的原则，使每个人都可以轻松使用。为了使解决方案工作，脚本需要由某些东西运行；我们将代码从第一步（在链接上循环以找到内部的链接）将代码放入函数ss_fixalllinks（）中，并使用Scott Andrew的函数将其绑定到窗口的Onload事件中：
>ss_addEvent(window,"load",ss_fixAllLinks);
整个代码看起来像这样：
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); >
>常见问题（常见问题解答）关于使用JavaScript平滑滚动的问题 var element = document.queryselector（'＃myElement'）; 您可以通过在链接上添加“单击”事件的事件侦听器来实现锚链接的平滑滚动。如果事件处理程序，您可以防止链接的默认操作，即立即导航到目标元素，而是使用scrollintoview方法平滑滚动到目标元素。以下是一个示例： scrollTop: $("#myElement").offset().top Can I implement smooth scrolling with CSS instead JavaScript？ 是的，您可以通过不使用scrollto或ScrollIntoview方法或设置它来设置'auto'来通过JavaScript禁用JavaScript的光滑滚动。这将使滚动瞬间而不是光滑。
emelt.scrollintoview（{crathion：'smooth'smooth'}）;
>此代码将平滑地滚动窗口，并使用id“ myElement”。 JavaScript得到了大多数现代浏览器的支持，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer不支持它。您可以查看MDN Web文档上的兼容性表以获取最新信息。
我可以控制光滑滚动的速度吗？
>平滑滚动的速度由浏览器确定，并且不能用JavaScript直接控制。但是，您可以使用window.requestanimationframe方法来创建一个自定义的平滑滚动函数。>如何通过javaScript实现平滑滚动以进行锚链接？
document.queryselectorall（'a [href^=“＃”]'）。 document.queryselector（this.getAttribute（'href'））。scrollIntoview（{{
行为：'smooth'
}）;
}）;
}）;
}）;
>
此代码将在页面上添加平稳的scroll scrolls。
是的，使用JavaScript平滑滚动时，您可以添加滚动偏移量。您可以通过从scollto方法中的y坐标或scrollintoview方法中的y坐标中减去所需的偏移来做到这一点。
This code will smoothly scroll the window to the element with the id ‘myElement’ over a period of 2 seconds.
是的，您可以使用滚动行为属性通过CSS实现平滑的滚动。您可以将此属性设置为在HTML或身体元素上“平滑”，以使整个页面平滑滚动。但是，此方法比JavaScript方法具有较少的浏览器支持。
如何测试光滑的滚动是否正常工作？
>您可以通过简单地尝试在页面上滚动来测试平滑滚动是否正常工作。如果滚动光滑而不是瞬间，则可以正常工作。您还可以使用浏览器中的开发人员工具来检查滚动行为。我可以使用JavaScript使用JavaScript的光滑滚动吗？
以上是用JavaScript使内部链接顺利滚动的详细内容。更多信息请关注PHP中文网其他相关文章！
