jQuery滚动到顶部

在网页中，经常需要给用户提供一个快速回到页面顶部的按钮。这个功能实现起来很简单，使用jQuery可以轻松实现。

实现步骤

1. 在HTML文件中定义一个回到顶部的按钮：

<a href="#" id="back-to-top" title="返回顶部">^</a>

2. 在CSS文件中定义样式：

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    font-size: 24px;
}

3. 在jQuery文件中添加代码：

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();
        }
    });

    $('#back-to-top').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});

实现效果

当用户向下滚动网页超过100像素时，回到顶部的按钮才会显示出来。当用户点击按钮时，网页会以动画的方式滚动回页面顶部。

markdown代码片段

# jQuery滚动到顶部

在网页中，经常需要给用户提供一个快速回到页面顶部的按钮。这个功能实现起来很简单，使用jQuery可以轻松实现。

## 实现步骤

1. 在HTML文件中定义一个回到顶部的按钮：

^

2. 在CSS文件中定义样式：

#back-to-top { position: fixed; bottom: 20px; right: 20px; display: none; font-size: 24px; }

3. 在jQuery文件中添加代码：

$(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } });

$('#back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

});

## 实现效果

当用户向下滚动网页超过100像素时，回到顶部的按钮才会显示出来。当用户点击按钮时，网页会以动画的方式滚动回页面顶部。