jquery点击后缓慢回到网页顶部,实现过程

这是个很简单,但是很实用的功能,其实一般都懂回到网页顶部,只需要类似设置锚点,最快的方法就是将href的值给#号就行了,但是最近一般都在追求用户体验,直接一瞬间到顶部确实感觉不是很舒服。网上给出了很多教程,但是我仍然觉得需要自己整理下,而且这些代码复制粘贴就可以直接用得上,节约之后的开发时间。

html代码如下:

<div class="gotop">
<a href="javascript:;">Top</a>
</div>

就这么简单,可以放在body标签对中任意位置。

CSS样式如下:

.gotop{position:fixed;
bottom:10px;
right:10px;
width:50px;
height:50px;
background: #14a5c0;
text-align:center;
line-height:50px;
font-size:16px;
font-weight:600;
opacity:0.9;
display:none;}
.gotop a{display:block;
width:100%;
height:100%;
color:#fff;}

样式定义按钮的形状,颜色,半透明属性和相对于页面的位置,设置按钮默认不显示。

js代码如下(注意,需要在页面上引入jquery)

$(document).ready(function(){
    $(window).scroll(function(){                            
        if($(window).scrollTop()<=100){
            $(".gotop").fadeOut(500);    
        }else{
            $(".gotop").fadeIn(500);
        }
    })
    $(".gotop").click(function(){
        $('body,html').animate({scrollTop:0},500);
    })
});

意思就是,在网页加载完毕后,当滚动条移动到距离头部100像素的时候,回顶部的按钮出现,当距离小于100像素的时候,按钮隐藏。

效果图如下:
1.png

发表评论
加载中...

相关文章