一个简易的“返回顶部”页面效果

来源：互联网发布：caffe实现fcn 编辑：程序博客网时间：2024/05/17 23:58

参考的廖大神的实现方法：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返回顶部。

demo下载地址：http://download.csdn.net/detail/somehow1002/9912094

阅读全文

0 0