简单的返回顶部特效 - 网站代码 -

简单的返回顶部特效

作者: 大老师

多资源综合型博客!

手机扫码查看

标签:

返回顶部

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

首先引入jQuery
js代码如下
$(function(){
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#backtop").css("bottom","1px");
                }
                else
                {
                    $("#backtop").css("bottom","-100px");
                }
            });
 
            //当点击跳转链接后,回到页面顶部位置
            $("#backtop").click(function(){
                //$('body,html').animate({scrollTop:0},1000);
        if ($('html').scrollTop()) {
                $('html').animate({ scrollTop: 0 }, 1000);
                return false;
            }
            $('body').animate({ scrollTop: 0 }, 1000);
                 return false;            
           });       
     });    
});

 

css

 

#backtop{position:fixed;right:7.5%;bottom:-100px;z-index:2;overflow:auto;width:54px;height:54px;border-top-right-radius:50px;border-top-left-radius:50px;background-image:url(btt.png);background-position:0 0;cursor:pointer;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out}

 

html

 

<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>

 

 

 

 

 

本文最后更新于2020-3-9,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。

文章版权信息

阅读时间:  发布于:2020-3-9

本文标题: 简单的返回顶部特效

本文链接: http://www.39ccv.cn/?post=391

版权声明:文章为《 大老师》原创,转载请保留出处!

分享到:

评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap