文章目录
  1. 1. html+css
  2. 2. jquery侧边栏
    1. 2.1. css
    2. 2.2. js
  3. 3. 小火箭回到顶部
    1. 3.1. css
    2. 3.2. js
  4. 4. Demo
  5. 5. 参考

最近帮一个朋友实现一个简单的页面效果:回到顶部。网上找了找做法,基本原理大致相同,只是呈现形式不同罢了。这里就简单整理一下。

html+css

最简单的实现方式,不过是硬编码在前端代码中。

<head>
    <style type="text/css">
        #back-to-top{
            position:fixed;
            bottom:50px;
            right:20px;
        }
    </style>
</head>
<body id="top" style="text-align:center; height:1000px">
    <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>
</body>

jquery侧边栏

使用js代码实现的回到顶部思路基本一致,监听window的滚动来控制“回到顶部”的出现和消失;点击“回到顶部”触发一个滚动到顶部的animation。比如下面侧边栏回到顶部的实现。

css

/* 侧栏回到顶部CSS */
.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}

js

(function() {
    <!-- 侧边栏返回顶部实现 -->
    var $backToTopTxt = "返回顶部",
        $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
            .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
                $("html, body").animate({ scrollTop: 0 }, 120);
            }),

        $backToTopFun = function() {
            var st = $(document).scrollTop(),
                winh = $(window).height();
            (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
            //IE6下的定位
            if (!window.XMLHttpRequest) {
                $backToTopEle.css("top", st + winh - 166);
            }
        };

    $(window).bind("scroll", $backToTopFun);
})();

小火箭回到顶部

css

#returnTop {
    _display:none;
    position:fixed;
    _position:absolute;
    z-index:999;
    left:15px;
    bottom:-100px;
    _bottom:auto;
    width:36px;
    height:65px;
    text-indent:-999px;
    overflow:hidden;
    background-image:url(../images/Top.png);
    _background-image:url(../images/Top.png);
    background-repeat:no-repeat;
    background-position:0 0;
    transition:bottom 0.9s;
    -webkit-transition:bottom 0.9s;
    -moz-transition:bottom 0.9s;
    -o-transition:bottom 0.9s;
}
#returnTop:hover {
    background-position:0 -65px;
}

js

(function() {
    console.log("dddddd");
    var $returnTop = $("#returnTop");
    $(window).scroll(function(){
        if ($(window).scrollTop()>100){
            $returnTop.css("bottom", "100px");
        }
        else
        {
            $returnTop.css("bottom", "-100px");
        }
    });

    //当点击跳转链接后,回到页面顶部位置

    $returnTop.click(function(){
        $('body,html').animate({scrollTop:0},500);
        return false;
    });
})();

Demo

http://2.frontendexample.sinaapp.com/page_jump_demo/test.html

参考

  1. jQuery实现简单而且很酷的返回顶部链接效果
文章目录
  1. 1. html+css
  2. 2. jquery侧边栏
    1. 2.1. css
    2. 2.2. js
  3. 3. 小火箭回到顶部
    1. 3.1. css
    2. 3.2. js
  4. 4. Demo
  5. 5. 参考