先引入jquery库

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

本例html代码及css样式如下

<style>
body{height:2000px}
#gotop{ position:fixed;right:50px;bottom:40%}
#gotop a{display:block;width:100px;height:36px;line-height:36px;text-align:center;background:#3dbdf8;color:#fff;cursor:pointer}
</style>
<div id="gotop"><a>回到顶部</a></div>

核心代码如下

$(document).ready(function() {
	//首先将#gotop隐藏
	$("#gotop").hide();
	//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
	$(function() {
		$(window).scroll(function() {
			if ($(window).scrollTop() > 100) {
				//渐入效果
				$("#gotop").fadeIn(1500);
			} else {
				//渐出效果
				$("#gotop").fadeOut(1500);
			}
		});
		//当点击跳转链接后，回到页面顶部位置
		$("#gotop").click(function() {
			$('body,html').animate({
				scrollTop: 0
			},
			500);
			return false;
		});
	});
});