不随页面滚动的回到顶部按钮 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .back-to
        {
            position: fixed;
            bottom: 35px;
            _bottom: 35px;
            right: 10px;
            z-index: 999;
            width: 50px;
            _zoom: 1;
        }
        .back-to .backtotop
        {
            float: left;
            display: block;
            width: 50px;
            height: 50px;
            background: #666 url(./backtotop.gif) center center no-repeat;
            margin-bottom: 15px;
            outline: 0 none;
            text-indent: -9999em;
            -moz-border-radius: 4px;
            -khtml-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            position: relative;
        }
        .back-to .backtotop .back-tip
        {
            position: absolute;
            visibility: hidden;
            top: -31px;
            left: -10px;
        }
        .back-to .backtotop:hover {
background-color: #333;
}
    </style>
</head>
<body style="height: 2000px;width: 960px;">
    <div id="toolBackTo" class="back-to" style="left: 1291px;">
        <a class="backtotop" href="#top" onclick="window.scrollTo(0,0);return false;">返回顶部
            <img src="./back-tip.png" class="back-tip">
        </a>
    </div>
    <div style="height: 1800px; width: 960px;">
</div>

 用到的两张图，传上来了。

backtotop.gif：

back-tip.png

人性化的小按钮，回到顶部，不随屏幕滚动。

实际效果大家可以参考这个网站的某条新闻查看：www.jobsky.net

posted on 2012-03-02 18:37  W＠SuperC  阅读(606)  评论(0)    收藏  举报

导航