平滑滾動不起作用，為什么？
[英]Smooth scroll won't work, why?
問題描述
問題是我有一個帶有錨點的網頁，我想平滑地滾動到它。 於是上網查了一下，找到了這段代碼。
//dezinerfolio
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}} J8N;d=5;&&M4M}d&&dM4dM}%4%} 0J8a,F4(F,fa@7a.4a.LP+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"),("\042Scroller.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})())
所以這適用於我所有的網站，所以我相信它適用於我的新網站，但它沒有用。 誰能看出為什么不？？？
這是 HTML
<head>
<script src="smooth.pack.js" type="text/javascript"></script>
<script> Scroller.speed=7; </script>
</head>
然后
<body>
<a href="#bottom" id="down1" class="down" style="display:block"></a>
然后大約一半的頁面。
<a name="bottom" id="bottom"></a>
</body>
這是鏈接的 CSS。
#down1 {
position:absolute;
width:100%;
height:50%;
top:50%;
cursor: url(d.png), auto;
z-index:99;
}
所以我知道這確實有效，因為我已經看到它在其他網站上有效。 但不知道是什么問題？？？
任何幫助表示贊賞。
謝謝
3 個解決方案
解決方案1
8 已采納 2012-07-25 04:20:01
我建議不要使用該腳本並使用 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>
編輯：
好的，發現您的代碼有問題，這是您的 css。 在你的 css 你有
html, body { overflow-x: hidden; }
將其更改為：
body { overflow-x: hidden; }
還有一種更簡單的方法來編寫 jQuery，從而減少代碼。
首先，您需要稍微重構一下您的 HTML
在您的鏈接部分，將您鏈接的 href 更改為您希望它們鏈接到的 div 的 id，例如：
<a href="#Portfoilio" class="link" id="down1" class="down" style="display:block"></a>
將更改為：
<a href="#bottom" id="down1" class="down link" style="display:block"></a>
您還會看到我添加了第二類“鏈接”。 這樣我們就可以用一個 jQuery 調用來定位每一個。
底部的 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>
這是我如何更改 HTML 和 jQuery 的鏈接： http : //pastebin.com/0LfyjNLx
解決方案2
0 2014-11-12 19:19:56
這是一種進行平滑滾動的超級簡單方法。 使用 jQuery 和 jQuery.localScroll 插件。
下載最新的 smoothscroll.js： https : //github.com/flesler/jquery.localScroll/releases
添加兩個 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>
然后確保將類“smoothScroll”添加到您的<a>鏈接中，如下所示：
<a href="#anchor1" class="smoothScroll">Jump to Page Location</a>
解決方案3
0 2020-05-16 20:48:00
您可以使用簡單的功能，如
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)
}
}
平滑滾動在 Bootstrap 4 網站上不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.