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

男娘i 2022-03-20 04:55 223阅读 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 条评论，223人围观）

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

相关阅读

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

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

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

相关使用jQuery实现浏览器滚动条返回顶部功能

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"/

迈不过友情╰/ 2024年02月19日 12:46/ 0 赞/ 76 阅读

相关 jquery 返回顶部

<div class="topup"> <img src="../images/topup.png" alt="" id="topup">

àì夳堔傛蜴生んèń/ 2023年05月30日 09:26/ 0 赞/ 18 阅读

相关 js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

我会带着你远行/ 2023年03月03日 13:25/ 0 赞/ 17 阅读

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

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

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

相关 jquery实现返回顶部效果

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

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

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

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

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

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

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

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

相关 JQuery实现返回页面功能

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

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

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

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

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