请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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

 
首先引入JS代码:
[JavaScript] 纯文本查看 复制代码
$(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部分:
[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部分:

[HTML] 纯文本查看 复制代码
<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。