jQuery下的返回顶部功能的实现实例页面

男娘i 2022-03-20 04:55 201阅读 0赞

##### 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(); });
    })();

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 js或jQuery实现返回顶部功能------Sestid

1、纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); ...

迈不过友情╰/ 2024年04月18日 10:32/ 0 赞/ 55 阅读

相关前端实例10——返回顶部实例（JS，jQuery）

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

秒速五厘米/ 2023年03月01日 12:22/ 0 赞/ 201 阅读

相关 jquery实现返回顶部效果

jQuery("\gotop").css('display','none');jQuery(window).scroll(function()\{if(jQuery(this)

我就是我/ 2022年08月04日 13:52/ 0 赞/ 263 阅读

相关利用JQuery实现复杂的顶部导航栏功能

今天给大家介绍一下如何利用JQuery实现复杂的顶部导航栏功能，复杂指的是导航栏选项下面显示的是文字+图片的内容。简单的导航栏我们一般利用多个ul+li进行嵌套使用，可

水深无声/ 2022年07月16日 11:43/ 0 赞/ 273 阅读

相关利用JQuery实现顶部导航栏功能

今天给大家介绍一下，如何利用JQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。下面举个例子具体介绍一下如何这些功能，案例如下：

落日映苍穹つ/ 2022年07月16日 11:40/ 0 赞/ 365 阅读

相关 JS实现页面返回顶部的匀加速运动

JS实现页面返回顶部的匀加速运动 //返回顶部 //声明返回顶部的函数 function returnTop(){

我会带着你远行/ 2022年07月13日 01:07/ 0 赞/ 201 阅读

相关 Web JS实现页面返回顶部

![右下角“返回顶部“按钮][1240] > > 之前写博客的时候加了个返回顶部的功能 > > 采用js的scrollTop属性实现了一下这个简单的功能当页面特别长的时

超、凢脫俗/ 2022年06月17日 00:54/ 0 赞/ 350 阅读

相关 jquery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本： ![复制代码][copycode.gif] 1 <script type="text/javascript"> 2 $

墨蓝/ 2022年06月13日 10:24/ 0 赞/ 233 阅读

相关 JQuery实现返回页面功能

写在正文之前的话：通常项目页面内容比较多的话，当用户拖动滚动条连续浏览后，想返回页面顶部，这时候一键返回功能就显得格外方便。效果图： ![20190122164738

浅浅的花香味﹌/ 2022年03月24日 18:44/ 0 赞/ 522 阅读

相关 jQuery下的返回顶部功能的实现实例页面

CSS代码： .backToTop { display: none; width: 18px;

男娘i/ 2022年03月20日 04:55/ 0 赞/ 202 阅读