`

jquery 返回顶部代码

js 
阅读更多
//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 = $('<div class="backToTop"></div>').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(); });
})();

分享到:
评论

相关推荐

    jquery返回顶部代码

    jquery返回顶部代码

    图翼网侧边jQuery返回顶部代码.zip

    本资源"图翼网侧边jQuery返回顶部代码.zip"提供了一个实用的jQuery特效,适用于网站的侧边栏,增强用户体验。下面我们将详细探讨这个特效涉及的jQuery知识点以及实现原理。 首先,jQuery的事件处理是关键部分。在这...

    简单实用jQuery返回顶部代码.zip

    这个“简单实用jQuery返回顶部代码.zip”压缩包提供了一种利用jQuery实现这一功能的方法。jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理以及动画效果。下面将详细讲解如何使用jQuery...

    蓝色jQuery返回顶部代码.zip

    "蓝色jQuery返回顶部代码.zip"是一个包含实现这一功能的源码包,旨在为网页添加一个美观且实用的返回顶部按钮。这个按钮在用户向下滚动页面时会淡入显示,点击后页面将以平滑动画效果返回到顶部位置,提供了良好的...

    腾讯网首页jQuery返回顶部代码.zip

    腾讯网首页的jQuery返回顶部代码是实现网页交互效果的一种常见技术,它主要依赖于JavaScript库jQuery。这个代码示例主要用于提供一种便捷的方式,帮助用户在浏览长页面时快速回到页面顶部,提升用户体验。以下是对这...

    Jquery返回顶部代码兼容各种浏览器

    **jQuery返回顶部功能详解** 在网页设计中,为了提高用户体验,常常会添加一个“返回顶部”的功能,使得用户在浏览长页面时能快速跳转到页面的顶部。本篇文章将详细解析如何使用jQuery实现这个功能,并确保其在各种...

    jquery返回顶部代码实例

    &lt;title&gt;jQuery 返回顶部实例 &lt;!-- 页面内容 --&gt; ... &lt;!-- 返回顶部按钮 --&gt; 返回顶部"&gt;返回顶部"&gt; &lt;script src="jquery.1.4.2-min.js"&gt; &lt;script src="scrolltopcontrol.js"&gt;&lt;/script&gt; ``` 接着,...

    动感jQuery返回顶部

    【描述】:“效果比较好的jQuery返回顶部代码”指的是利用jQuery的高效性能和丰富的API,编写出能够平滑、动态地显示和隐藏,并具有良好交互效果的“返回顶部”功能。这样的代码通常会结合CSS动画和JavaScript事件...

    jQuery右端悬浮带返回顶部代码

    jQuery右端悬浮带返回顶部代码是一种常见的网页交互设计,它通常出现在页面滚动时,一个固定在屏幕右侧的小图标(如箭头或按钮)会显示出来,用户点击后页面会迅速滚动回顶部。这个功能可以提升用户体验,特别是对于...

    jQuery平滑返回顶部代码.zip

    本资源“jQuery平滑返回顶部代码.zip”提供了一种实现这一功能的方法,利用了广泛使用的JavaScript库jQuery。接下来,我们将深入探讨jQuery平滑返回顶部代码的工作原理、实现方式以及如何在实际项目中应用。 首先,...

    猪八戒网jQuery返回顶部代码

    本项目"猪八戒网jQuery返回顶部代码"利用了JavaScript库jQuery来实现这一功能,具体是基于jQuery 1.7.2的最小化版本(jquery-1.7.2.min.js)进行开发,提供了平滑的淡入淡出动画效果,提升了交互体验。 jQuery是一...

    jQuery右侧边栏二维码QQ客服返回顶部代码

    在这个特定的项目中,“jQuery右侧边栏二维码QQ客服返回顶部代码”是一个实现了一些常见网站功能的代码片段,包括: 1. **jQuery库的引入**:首先,你需要在网页中引入jQuery库,这通常是通过在HTML文档的`&lt;head&gt;`...

    jQuery返回顶部跟底部浮窗代码.zip

    【jQuery返回顶部跟底部浮窗代码】是一种常见的网页交互元素,用于提高用户体验。在网页滚动时,用户可以方便地点击这个浮动窗口中的按钮,快速回到页面的顶部或底部。这种设计常见于长页面,比如博客文章、产品...

    jquery返回顶部隐藏按钮.rar

    "jquery返回顶部隐藏按钮.rar"这个压缩包文件可能包含了实现这一功能的所有必要资源,包括HTML、CSS和JavaScript文件。其中,"jiaoben606"可能是项目的主要脚本文件或者示例代码文件。在实际应用中,这个文件可能...

    jQuery可变透明度返回顶部代码

    **jQuery可变透明度返回顶部代码详解** 在网页设计中,提供一个返回顶部的功能是非常常见的需求,这可以方便用户在浏览长页面时快速回到页面顶部。"jQuery可变透明度返回顶部代码"就是一个实现此类功能的JavaScript...

    jQuery绿色QQ在线客服返回顶部代码.zip

    在"jQuery绿色QQ在线客服返回顶部代码"中,`jQuery绿色QQ在线客服返回顶部代码`可能是实现这些功能的源代码文件,如JavaScript脚本和CSS样式表。文件"说明.htm"可能包含了具体的实现细节和使用说明,帮助开发者理解...

Global site tag (gtag.js) - Google Analytics