Question

我是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，那么这个答案会有一些用处，因为你可以指定你想要滚动到顶部的距离，我相信。

Slow down scroll to top event by jQuery animate

$('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：

<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：

$(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按下按钮时，我试图让我的页面滚动得更慢？

1 个答案: