在日常网页浏览中，经常会遇到需求需要快速回到顶部，尤其是在长页面阅读时，这个需求更加迫切。这时候，我们可以使用回到顶部代码进行实现。

本文将介绍如何让页面回到顶部以及快速添加回到顶部代码。

一、如何让页面回到顶部？

1.使用原生JavaScript实现回到顶部

使用原生JavaScript实现回到顶部的代码如下：

```

function backToTop() {

var timer = setInterval(function() {

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

var speed = Math.floor(scrollTop / 5);

document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed;

if (scrollTop == 0) clearInterval(timer);

}, 30);

}

```

该代码主要通过使用定时器不断地修改浏览器窗口的scrollTop值，从而使页面回到顶部的效果。

2.使用jQuery实现回到顶部

使用jQuery实现回到顶部的代码如下：

```

$(document).ready(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;

});

});

```

该代码主要通过监听window对象的scroll事件，根据当前scrollTop值，控制回到顶部按钮的显示与隐藏以及点击事件。

二、快速添加回到顶部代码

1.使用第三方插件

通过使用第三方插件，可以轻松快速地实现回到顶部功能。常用的一些回到顶部插件包括：jQuery Back to Top、Gotop、toTop等。

这些插件均提供了完整的使用文档以及非常详细的配置选项，使用起来非常简单。

2.手写回到顶部代码

如果不想使用第三方插件，也可以手动编写回到顶部代码。具体操作可以使用如下步骤：

(1) 在页面中添加一个回到顶部的按钮，例如：

```

回到顶部

```

(2) 在CSS文件中对该按钮进行样式设置，例如：

```

#back-to-top {

position: fixed;

bottom: 20px;

right: 20px;

display: none;

}

```

(3) 在JavaScript文件中编写控制回到顶部行为的代码，例如：

```

$(document).ready(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;

});

});

```

该代码为使用jQuery编写的回到顶部代码，实现效果与第一种方法相同。

总结：回到顶部功能在日常网页浏览中非常实用，可以提高用户体验和页面操作效率。本文介绍了两种回到顶部代码的实现方法，分别使用了原生JavaScript和jQuery技术，同时也介绍了如何快速添加回到顶部代码。读者们可以根据实际需求选择适合自己的方法进行实现。