一个简易的html“返回顶部”页面部件

参考的廖大神的实现方法:https://www.liaoxuefeng.com/article/0013738939371174a66d9fcf5094b1dbf28e9e9ccbf9d61000

当网页页面过长时,查看内容多有不便,因此大多数的网页都实现了一个“返回顶部”的功能按钮。

以下使用的是html+css+js实现的“返回顶部”功能。

步骤

1.在html页面中嵌入“返回顶部”的部件
<div class="go-top">
	<div class="arrow"></div>
	<div class="stick"></div>
</div>
2.css中定义该部件的形态 
.go-top {
    display: none;
    opacity: 0.6;
    z-index: 999999;
    position: fixed;
    bottom: 40px;
    left: 92%;
    margin-left: 40px;
    border: 1px solid #a38a54;
    width: 50px;
    height: 50px;
    background-color: #bfc092;
    border-radius: 25px;
    cursor: pointer;
}

.go-top:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.go-top div.arrow {
    position: absolute;
    left: 15px;
    top: 3px;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: #0066cc;
}

.go-top div.stick {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 8px;
    height: 14px;
    display: block;
    background-color: #0066cc;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

设置left:92%控制部件在整个页面靠右位置。

设置border-radius为width(height)的一半,让部件呈现为圆形。

3.js控制部件的show与hide 
$(function() {
	$(window).scroll(function() {
		if ($(window).scrollTop() > 600)
			$('div.go-top').show();
		else
			$('div.go-top').hide();
	});
	$('div.go-top').click(function() {
		$('html, body').animate({scrollTop: 0}, 1000);
	});
});
当页面浏览到600px之后,跳出“返回顶部”部件。

并且设置点击之后1000ms返回顶部。

效果

实现效果见本页面右方。