随着互联网的发展，单个网页要呈现的内容越来越多，例如淘宝，京东类的电商网页，csdn,segmentfault 类的博客文章网页，还有许多网页都需要回到顶部功能，今天我们就来探索一下，看看怎么写回到顶部功能才能更好适应业务需求。
    本文打算面向的是网页初学者或者一些平时工作没有注意到这方面的朋友，希望的是通过本文章让读者更加注重细节，哪怕是一个小小的功能。

布局样式

要求

    高度自适应,高度让内容撑开，文字图标垂直居中。
    像淘宝网页，为了充分利用空间，吸引更多的点击，在回到顶部按钮的地方还有实惠热卖，猜你喜欢等等按钮，并且每当活动都会有不同的呈现，所以这个 div 需要高度自适应，高度让内容撑开。
    而文字图标垂直居中已经是一个设计的习惯，所以布局要考虑适应后续文字图标的大小不同，还有怎么方便地实现文字图标垂直居中。

HTML：

<div id="to-top">
  <a href="JavaScript:;">回到顶部</a>
</div>
1
2
3

css:

#to-top {
  width: 36px;
  line-height: 1.25;
  background-color: #fff;
  position: fixed;
  right: 40px;
  bottom: 40px;
  text-align: center;
}
#to-top a {
  padding: 5px;
  display: block;
  text-decoration: none;
  color: black;
  border: 1px solid #940050;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果：

图片描述

跳转功能

跳转功能有许多实现

利用锚点

HTML：

<a href="#">回到顶部</a>
1

优点：简单快速，没有兼容性问题；
缺点：没有缓慢过渡的动画效果，用户体验不好，这种利用锚点跳转的一般用于文章目录的跳转，而不是回到顶部；

原生 JavaScript 实现

兼容问题

scrollTop 在浏览器的兼容不一样

document.body.scrollTop || document.documentElement.scrollTop;
1

Element.scrollTop

    Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
    一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。
scrollTop 可以被设置为任何整数值，同时注意：
    如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop 将被设置为 0。
    设置 scrollTop 的值小于 0，scrollTop 被设为 0
    如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

var ToTop_btn = document.getElementById("to-top");
var ToTop_distance = 30;
ToTop_btn.onclick = function(){
	vjsar ToTop_animate = setInterval(function(){
		var scroll = document.body.scrollTop || document.documentElement.scrollTop;
		if ( scroll <= 0) {
			clearInterval(ToTop_animate);
		}
		scroll -= ToTop_distance;
		document.body.scrollTop=document.documentElement.scrollTop = scroll;
	},5);
};
1
2
3
4
5
6
7
8
9
10
11
12

兼容到 IE7+

Window.scrollTo()

scrollTo() 方法可把内容滚动到指定的坐标，设置 scrollTo(0,0)可以实现回到顶部的效果。

var ToTop_btn = document.getElementById('to-top');
var ToTop_distance = 30;
ToTop_btn.onclick = function() {
  var ToTop_animate = setInterval(function() {
    var scroll = document.body.scrollTop || document.documentElement.scrollTop;
    if (scroll <= 0) {
      clearInterval(ToTop_animate);
    }
    scroll -= ToTop_distance;
    scrollTo(0, scroll);
  }, 5);
};
1
2
3
4
5
6
7
8
9
10
11
12

兼容到 IE7+

Window.scrollBy()

scrollBy() 方法可把内容滚动指定的像素数。
注意： 要使此方法工作 window 滚动条的可见属性必须设置为 true！

var ToTop_btn = document.getElementById('to-top');
var ToTop_distance = 30;
ToTop_btn.onclick = function() {
  var ToTop_animate = setInterval(function() {
    if (scroll <= 0) {
      clearInterval(ToTop_animate);
    }
    scrollBy(0, -ToTop_distance);
  }, 5);
};
1
2
3
4
5
6
7
8
9
10

兼容到 IE7+

利用 jQuery 实现

$('#to-top').click(function() {
  $('body,html').animate({ scrollTop: 0 }, 300);
});
1
2
3

利用 vue 实现

后续补充

利用 react 实现

后续补充

TOC