首页 > 代码库 > jQuery实现简单而且很酷的返回顶部链接效果

jQuery实现简单而且很酷的返回顶部链接效果

demo:

html部分:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>返回页面顶部</title>
   <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/style.css">
    <script type="text/javascript" src=http://www.mamicode.com/"../jquery/js/jquery-1.7.2.min.js"></script>
</head>

<body>

    <p>1</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <p>2</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <p>3</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <p>4</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <p>5</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="back_to_top">
        <a href=http://www.mamicode.com/"#">
            <div>返回顶部</div>
            <div>广告或图片部分</div>
        </a>

    </div>
    <script type="text/javascript" src=http://www.mamicode.com/"js/returntop.js">
    </script>
</body>
</html>

css样式:

#back_to_top {
            position: fixed;
            bottom: 100px;
            right: 0px;
            width: 100px;
            height: 100px;
            background: #ccc;
            -moz-transition: background 1s;/*鼠标经过颜色渐变效果*/
            -webkit-transition: background 1s;
            -o-transition: background 1s
        }
        #back_to_top:hover {
            background: #aaa;
        }

js文件:

$(document).ready(function () {
    $("#back_to_top").hide();//首先将#back-to-top隐藏
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
                $("#back_to_top").fadeIn(1500);
            } else {
                $("#back_to_top").fadeOut(1500);

            }
        });
        //点击后返回到顶部
        $("#back-to-top").click(function () {
            $(‘body,html‘).animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });
});


也可以在添加锚点链接

<body id="top">

<div id="back_to_top">
        <a href=http://www.mamicode.com/"#top">
            <div>返回顶部</div>
            <div>广告或图片部分</div>
        </a>

    </div>

文章部分来自(飞鱼的声纳)

jQuery实现简单而且很酷的返回顶部链接效果