X  
登录

还没有账号?立即注册

忘记密码?
登陆
X  
注册

已经有账号?马上登陆

获取验证码
重新获取(60s)
立即注册
统计
  • 建站日期:2021-03-10
  • 文章总数:35 篇
  • 评论总数:14 条
  • 分类总数:16 个
  • 最后更新:6月18日
文章 建站技术

网站添加简单的返回顶部特效

小蓝
首页 建站技术 正文

效果图:

网站添加简单的返回顶部特效
-蓝立网
-第1
张图片

首先引入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(返回顶部图片链接);
    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
}

把效果图保存,上传到服务器然后修改CSS里的返回顶部图片链接即可!

html部分:

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

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
Emlog文章GID断号自动补入
« 上一篇
Emlolg模板DYBLOG扁平化卡片风格
下一篇 »

发表评论

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
社交账号登录

谷歌广告

热门文章

2
3
EmlogPro简约蓝BULE博客主题
4
5
WordPress模板CorePress免费多功能