項目經曆——返回頂端的簡單實現

背景描述：

　　在項目中，有一個查看發行任務的業務功能，內容都是各種精神，指示和通知，免不了的都是幾千幾千的文字內容，這樣就產生了一個使用者體驗度業務：如果看到主要內容後，不想繼續向下看，而是想返回頂端，應該給使用者一個返回頂端的提示。這裡簡單分享一下我做的返回頂端的代碼和實現。

JS代碼：

    <style>        .back-to {            bottom: 35px;            overflow: hidden;            position: fixed;            right: 10px;            width: 50px;            z-index: 999;        }            .back-to .back-top {                background: url("../../Images/返回頂端圖片.png") no-repeat scroll 0 0 transparent;                display: block;                float: right;                height: 50px;                margin-left: 10px;                outline: 0 none;                text-indent: -9999em;                width: 50px;            }                .back-to .back-top:hover {                    background-position: -50px 0;                }    </style>    <script type="text/javascript">        $(document).ready(function () {            var bt = $('#toolBackTop');            var sw = $(document.body)[0].clientWidth;            var limitsw = (sw - 1060) / 2 - 40;            if (limitsw > 0) {                limitsw = parseInt(limitsw);                bt.css("right", limitsw);            }            $(window).scroll(function () {                var st = $(window).scrollTop();                if (st > 30) {                    bt.show();                } else {                    bt.hide();                }            });        })    </script>

Html代碼：

<div style="display:none;" class="back-to" id="toolBackTop"><a title="返回頂部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">返回頂部</a></div>

實現效果：

　　往下滾動滑鼠的時候，自動顯示出來：返回頂端的表徵圖，點擊之後，返回頂端。

素材圖片：