当您使用Jquery按下按钮时，我试图使页面滚动速度变慢吗? [英] I am trying to make my page scroll slower when you press a button using Jquery?

问题描述

我对JQuery还是很陌生，可以将页面移到顶部和底部，就像我想放慢一点.那么如何降低滚动速度呢? 这是我到目前为止的内容:

I am very new to JQuery and I can make the page go to the top and bottom like I want to slow the movement down a bit. So how to I slow the scroll speed down? This is what I have so far:

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); 
}

推荐答案

我相信，如果您打算添加jQuery，那么此答案将很有用，因为您可以指定要滚动的顶部距离.

If you are planning to add jQuery then this answer will be of some use, because you can specify how far from the top you want to scroll, i believe.

通过jQuery动画降低滚动到顶部事件的速度

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

在 http://api.jquery.com/animate/

还有这个scrollTo插件

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

更新:

您只能使用jQuery，因为添加自己的动画将需要更多的工作.

You can just use jQuery because adding your own animations is going to be more work.

试试这个jsfiddle http://jsfiddle.net/eVJvH/2/，我知道动画滚动条有效，但在提琴框架内无效，请在自己的页面上尝试使用它，并查看其是否起作用(使用"slow"一词)，您可以将其调整为不同的值和数字，以控制缓慢的速度想要使用它，请查看animate jquery api页面上有关如何使用它的更多信息:

Try this jsfiddle http://jsfiddle.net/eVJvH/2/, I know the animate scroll works but inside the frame on the fiddle its not, try it yourself on your own page and see if it works, where the word "slow" is used, you can adjust this to different values and numbers to control how slow you want it to be, look on the animate jquery api page for more information on how to use it:

html:

<div id="sur1" class="red block"></div>
<div id="sur2" class="blue block"></div>
<div id="pt1" class="green block hide"></div>
<div id="pt2" class="yellow block hide"></div>

css:

.block {
    height: 50px;
    width: 50px;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

.green {
    background: green;
}

.yellow {
    background: yellow;
}

.hide {
    display: none;
}

javascript:

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");
    });
});

这篇关于当您使用Jquery按下按钮时，我试图使页面滚动速度变慢吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！