仿新浪微博返回顶部的js实现(jQuery)-优快云博客

本文深入探讨了网站中返回顶部按钮的设计与实现细节，通过提供CSS和JavaScript代码实例，展示了如何增强用户体验。文章从按钮的样式、位置、交互等方面入手，详细解释了如何使用CSS进行样式定制，以及JavaScript如何实现滚动到页面顶部的功能，并特别关注了不同浏览器兼容性和IE6的特殊处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在各种大型网站都非常注重用户体验,而良好用户体验可以从细微之处看出,比如这些返回顶部按钮。

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 = $('
 
').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);
    $(function() { $backToTopFun(); });
})();
<转载>

转载于:https://www.cnblogs.com/wenson/p/3322287.html