当你使用Jquery按下按钮时，我试图让我的页面滚动得更慢？

我是JQuery的新手，我可以让页面转到顶部和底部，就像我想减慢运动速度一样。 那么如何减慢滚动速度呢？ 这是我到目前为止：

document.getElementById('sur2').onclick = function () { document.getElementById('pt1').style.display='block'; document.getElementById('pt2').style.display='none'; window.scroll(0,0); } document.getElementById('sur1').onclick = function () { document.getElementById('pt1').style.display='none'; document.getElementById('pt2').style.display='block'; window.scroll(0,5000); } 

Answer 1

如果你打算添加jQuery，那么这个答案将会有所帮助，因为你可以指定你想要滚动到顶部的距离，我相信。

通过jQuery动画减慢滚动到顶部事件

 $('a[href=#top]').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); }); 

在http://api.jquery.com/animate/上查看jQuery API。

还有这个scrollTo插件

http://flesler.com/jquery/scrollTo/

更新：

您可以使用jQuery，因为添加自己的动画将会更有效。

尝试这个jsfiddle http://jsfiddle.net/eVJvH/2/ ，我知道动画卷轴可以工作但是在小提琴框架内不是，在你自己的页面上自己试试看看它是否有效，这个词在哪里“慢“使用，您可以将其调整为不同的值和数字以控制它的速度，请查看animate jquery api页面以获取有关如何使用它的更多信息：

HTML：

CSS：

 .block { height: 50px; width: 50px; } .red { background: red; } .blue { background: blue; } .green { background: green; } .yellow { background: yellow; } .hide { display: none; } 

JavaScript的：

 $(function() { $("#sur2").on("click", function () { $("#pt1").toggleClass("hide"); $("#pt2").addClass("hide"); $("html, body").animate({scrollTop: "0px" }, "slow"); }); $("#sur1").on("click", function () { $("#pt2").toggleClass("hide"); $("#pt1").addClass("hide"); $("html, body").animate({scrollTop: "5000px" }, "slow"); }); });