javascript 平滑滚动不起作用，为什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11632562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth scroll won't work, why?
提问by williamchanter
The issue is I have a web page with a anchor, I want to scroll smoothly to it. So I looked around on-line and found this code.
问题是我有一个带有锚点的网页，我想平滑地滚动到它。于是上网查了一下，找到了这段代码。
//dezinerfolio
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}} J8N;d=5;&&M4M}d&&dM4dM}%4%} 0J8a,F4(F,[email protected]+F7Jend8e66.cancelBubble=true;6.Value=fa@;}&&(E(7J8di=Hner3||5.G3;hN.3;a=(Ed>ah-d>i7e@{-(h-d)7}e@{a=a+(d-a}To(0,aEa==a}=aJHit8KwHdow,A,A7,A82P;l=9;d=locatiP;D&&D.HdexOfL#)!=-1&&(l/+l=C)Kl,Gck,endEl.PGck=2l=this.hash.substr(1E9.name==l;i=setILL+(9)+),107}}}}}};Hit()",b=48;while(b>=0)a=a.replace(new RegExp("%23456789@ACDEFGHJKLMNP".charAt(b),"g"),("2Scroller.entfunction(offsetParscrollwindow.returndocumattachEvntervala=.getElemsByTagName(a);if(offsetTop){for(i=0;i<a.length;i++.pathnamea+=Math.ceil((d-ae.stopPropagationTopa.addEvListenerbody)/speede.prevDefaultclearI(i)pageYOffsetend(this);Height .Elemev)}:a[i]lseload=dl.href);b,dcliin},((.=.=C||on".split(""))[b--]);return a})())
So this works on all of my websites, so I believed it would work on my new site, BUT it did not work. Can anyone see why not???
所以这适用于我所有的网站，所以我相信它适用于我的新网站，但它没有用。谁能看出为什么不？？？
This is the HTML
这是 HTML
<head>
<script src="smooth.pack.js" type="text/javascript"></script>
<script> Scroller.speed=7; </script>
</head>
Then
然后
<body>
<a href="#bottom" id="down1" class="down" style="display:block"></a>
Then about half way down the page.
然后大约在页面的一半。
<a name="bottom" id="bottom"></a>
</body>
This is the CSS for the link.
这是链接的 CSS。
#down1 {
position:absolute;
width:100%;
height:50%;
top:50%;
cursor: url(d.png), auto;
z-index:99;
}
So I know this does work, because I have seen it work on other sites. But not sure what the issue is???
所以我知道这确实有效，因为我已经看到它在其他网站上有效。但不知道是什么问题？？？
Any help is appreciated.
任何帮助表示赞赏。
Thanks
谢谢
回答by jsweazy
I would recommend not using that script and using jQuery. This can be done very easily with jQuery.
我建议不要使用该脚本并使用 jQuery。这可以使用 jQuery 轻松完成。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<a href="#bottom" id="down1" class="down" style="display:block"></a>
....
<a name="bottom" id="bottom"></a>
<!-- load jquery however you like I will load from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// Document ready shorthand statement
$(function() {
// Select link by id and add click event
$('#down1').click(function() {
// Animate Scroll to #bottom
$('html,body').animate({
scrollTop: $("#bottom").offset().top }, // Tell it to scroll to the top #bottom
1000 // How long scroll will take in milliseconds
);
// Prevent default behavior of link
return false;
});
});
</script>
</body>
</html>
EDIT:
编辑：
Ok found the problem with your code, it is your css. In your css you have
好的，发现您的代码有问题，这是您的 css。在你的 css 你有
html, body { overflow-x: hidden; }
change that to this:
把它改成这样：
body { overflow-x: hidden; }
Also there is an easier way to write your jQuery so that it is less code.
还有一种更简单的方法来编写 jQuery，从而减少代码。
first you will need to restructure your HTML a little
首先，您需要稍微重构一下您的 HTML
In your link section change the href of you links to the the id of the div you want them to link to, for example:
在您的链接部分，将您链接的 href 更改为您希望它们链接到的 div 的 id，例如：
<a href="#Portfoilio" class="link" id="down1" class="down" style="display:block"></a>
would change to:
将更改为：
<a href="#bottom" id="down1" class="down link" style="display:block"></a>
also you will see i added a second class "link". This is so we can target each with one jQuery call.
您还会看到我添加了第二个类“链接”。这样我们就可以用一个 jQuery 调用来定位每一个。
and your jQuery at bottom would change to this:
底部的 jQuery 将更改为：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// Document ready shorthand statement
$(function() {
$('.link').click(function() {
var id = $(this).attr('href');
$('html,body').animate({ scrollTop: $(id).offset().top }, 'slow');
// Prevent default behavior of link
return false;
});
});
</script>
Here is a link to how i change your HTML and jQuery: http://pastebin.com/0LfyjNLx
这是我如何更改 HTML 和 jQuery 的链接：http: //pastebin.com/0LfyjNLx
回答by Matt Wilson
Here's a super-simple way to do the smooth scrolling. Use jQuery and the jQuery.localScroll plugin.
这是进行平滑滚动的超级简单方法。使用 jQuery 和 jQuery.localScroll 插件。
Download the latest smoothscroll.js: https://github.com/flesler/jquery.localScroll/releases
下载最新的smoothscroll.js：https: //github.com/flesler/jquery.localScroll/releases
Add the two javascript references:
添加两个 javascript 引用：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>
Then make sure to add the class "smoothScroll" to your <a>links, like this:
然后确保将类“smoothScroll”添加到您的<a>链接中，如下所示：
<a href="#anchor1" class="smoothScroll">Jump to Page Location</a>
回答by Eduards Silins
You can use simple function like
您可以使用简单的功能，如
scrollTo(x,y){
let x1=0
let y1=window.scrollY
let yDiff=y-y1
if(yDiff>10 || yDiff<-10){
window.scrollTo(x,y1+(yDiff/10))
setTimeout(()=>{
this.scrollTo(x,y,smooth)
},10)
}
}
