如何实现“返回顶部”的页面效果

廖雪峰 / 编程 / ... / Reads: 2822

在很多网站中,如果滚动到页面下方,会在右下角一个固定位置出现“返回顶部”的按钮,点一下浏览器滚动条就自动回到顶部了,今天研究了一下,实现的效果如图:

go-top

首先必须感谢知乎,因为这个按钮的样式就是照抄他们的,纯CSS实现,无图片,我只改了颜色。

关于如何用CSS画三角形,参考纯CSS气泡效果一文。

首先,在body中添加“返回顶部”按钮:

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

重点是go-top的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%可以使按钮在右方出现,但又不会太紧贴滚动条。

按钮默认不可见,当滚动页面到一定高度后,按钮出现,这里用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);
    });
});

当按下按钮时,有动画效果返回顶部。

jQuery实在是太强大了,以至于如果你还不会jQuery那你永远都不可能成为一个真正的前端工程师!

Comments

Make a comment

Author: 廖雪峰

Publish at: ...

关于作者