在网页中添加 “返回顶部”按钮

来源：互联网发布：java 必须加final 编辑：程序博客网时间：2024/05/17 06:21

1.首先在body中添加“返回顶部”按钮

<body>    <div class="go-top">        <div class="arrow"></div>        <div class="stick"></div>    </div>    ...</body>

2.css 的定义

div.go-top {    display: none;    opacity: 0.6;    z-index: 999999;    position: fixed;    bottom: 113px;    left: 90%;    margin-left: 40px;    border: 1px solid #a38a54;    width: 38px;    height: 38px;    background-color: #eddec2;    border-radius: 3px;    cursor: pointer;}div.go-top:hover {    opacity: 1;    filter: alpha(opacity=100);}div.go-top div.arrow {    position: absolute;    left: 10px;    top: -1px;    width: 0;    height: 0;    border: 9px solid transparent;    border-bottom-color: #cc3333;}div.go-top div.stick {    position: absolute;    left: 15px;    top: 15px;    width: 8px;    height: 14px;    display: block;    background-color: #cc3333;    -webkit-border-radius: 1px;    -moz-border-radius: 1px;    border-radius: 1px;}

使用fixed定位，让按钮始终出现在右下角，通过设定left:90%可以使按钮在右方出现，但又不会太紧贴滚动条。

3.按钮默认不可见，当滚动页面到一定高度后，按钮出现，这里用jQuery实现，代码相当简单

$(function() {    $(window).scroll(function() {        if ($(window).scrollTop() > 1000)            $('div.go-top').show();        else            $('div.go-top').hide();    });    $('div.go-top').click(function() {        $('html, body').animate({scrollTop: 0}, 1000);    });});

转载自 http://www.liaoxuefeng.com/article/0013738939371174a66d9fcf5094b1dbf28e9e9ccbf9d61000

1 0