jquery - 回到顶部

Question

我在这里看到这个小提琴样本

我希望当"到顶部"出现时,点击一下!应平滑或慢速滚动到顶部

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
});

Answer 1

$("#toTop").click(function () {
   //1 second of animation time
   //html works for FFX but not Chrome
   //body works for Chrome but not FFX
   //This strange selector seems to work universally
   $("html, body").animate({scrollTop: 0}, 1000);
});

http://jsfiddle.net/fjXSq/161/

Answer 2

使用解决方案更新了JSFiddle

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
});

$("#toTop").click(function() {
    $("html, body").animate({scrollTop: 0}, 1000);
 });

Answer 3

首先让我们创建按钮。

<a href="#" class="scrollToTop">Scroll To Top</a>

现在我们可以使用以下 CSS 设置按钮样式。

<style>
.scrollToTop{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom:75px;
    right:40px;
    display:none;
    background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
    text-decoration:none;
}
</style>

将以下内容复制并粘贴到 Javascript 文件中以添加 Javascript 功能。

<script>
$(document).ready(function(){
    
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});
</script>