26
2013-11

div+css+juqery返回顶部按钮代码

实现效果:当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部。

HTML结构

<a id="gotop" href="#"></a>

CSS代码

#gotop{ 
    display:block;  
    width:60px; 
    height:60px;
    position:fixed;  
    bottom:50px;  
    right:40px; 
    border-radius:10px 10px 10px 10px;   
    text-decoration:none;  
    display:none;  
    background-color:#999999;     
}

jQuery代码

$(function(){
    $(window).scroll(function(){  //只要窗口滚动,就触发下面代码 
        var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度 
        if( scrollt >200 ){  //判断滚动后高度超过200px,就显示  
            $("#gotop").fadeIn(400); //淡出     
        }else{      
            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动   
        }
    });
    $("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},200);
    });
});

除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/238.html

评论列表:

1  白癜风基金  2017-1-11 11:24:25 回复该留言  IP:114.253.87.70
是第三方第三方第三个法国恢复和规范今天一天问问
http://www.liyibing.net/李毅冰
白癜风基金

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量