0

我对 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); 
}
4

1 回答 1

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/，我知道动画滚动有效，但在小提琴的框架内它不是，在你自己的页面上自己尝试一下，看看它是否有效，“慢”这个词" 使用时，您可以将其调整为不同的值和数字以控制您希望它有多慢，请查看动画 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");
    });
});
于 2013-10-10T17:18:58.097 回答