使用jQuery实现返回顶部

下面是“使用jQuery实现返回顶部”的完整攻略：

1. 在HTML文件中引入jQuery库

```html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```

2. 创建返回顶部按钮

将以下代码添加到HTML文件的合适位置

```html
<button id="goTop">返回顶部</button>
```

3. 编写JavaScript代码

在页面的底部添加以下代码

```javascript
$(document).on('click', '#goTop', function() {
    $('html,body').animate({scrollTop: 0}, 800);
});
```

上述代码使用了jQuery的animate()方法，通过给html和body元素同时设置scrollTop值为0，就可以让页面向上滚动，返回到顶部。其中800表示滚动的持续时间为800毫秒。

示例一：返回按钮在页面底部固定

常见的一种实现方式是将返回顶部按钮固定在页面底部，让它随着页面的滚动而消失或出现。下面是一段示例代码：

```html
<style>
#goTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999;
}
</style>

<script>
$(document).ready(function() {
$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('#goTop').fadeIn();
    } else {
        $('#goTop').fadeOut();
    }
});
});
</script>

这段代码中，通过设置position为fixed，将返回按钮固定在页面底部。当页面滚动的高度超过100px时，通过调用fadeIn()方法，让返回按钮渐渐地出现；当滚动高度小于100px时，通过调用fadeOut()方法，让返回按钮渐渐地消失。

示例二：返回按钮在侧边并带有缓动动画

这种实现方式是让返回顶部按钮固定在浏览器的侧边，并添加一个缓动动画。下面是一段示例代码：

```html
<style>
#goTop {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #111;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: all .5s;
}
#goTop:hover {
    background-color: #f00;
    transform: scale(1.2);
}
</style>

<script>
$(document).ready(function() {
    $("#goTop").click(function() {
        $("html, body").animate({scrollTop: 0}, 800);
        return false;
    });
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $("#goTop").addClass("show");
        } else {
            $("#goTop").removeClass("show");
        }
    });
});
</script>

这段代码中，#goTop的样式和第一个示例中的差不多，需要注意的是添加了transition属性来产生缓动效果，同时在:hover状态下的缩放动画也通过transition属性实现。另外，scroll事件中添加的判断逻辑和第一个示例中一致，只不过这次判断返回按钮是否出现的条件为滚动高度大于100px时添加show类，通过该类来实现侧边定位和在页面中出现的动画效果。

至此，就完成了使用jQuery实现返回顶部的完整攻略，希望对你有所帮助。