非常简单的自动返回顶部按钮的jquery,区分了隐藏和动画

 2016-11-28 20:34

很多人网站上都有TopBack(返回顶部)的按钮,我也做过一个,是通过A链接返回到顶部body的ID。不过我渐渐发现这样做的确不好,最后还是想做一个简单的jquery来代替它。网上找了几个感觉都太复杂了,没必要,就自己动手做了一个,拿出来和大家分享下。

准备部分

先做一下返回顶部的盒模型,里面放些必要的元素就可以了:

<div class="box hiddened" id="backTop">
    <a href="#" id="returnTop">...</a>
</div>

为了区分,我给盒模型做了两个样式,一个是用来控制隐藏的,另外一个是控制盒模型浮动的:

.box{position:fixed;}
.hiddened{display:none;}/* 隐藏了盒模型 */

因为我们是用是jquery,所以需要在必要的地方调用JS。我这里调用了Bootstrap的一个JS:

<script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>

做完了准备工作,我们就可以开始写jquery代码了。

带动画的返回顶部

首先,我们想要一个返回顶部的动作,并且在A链接按下的时候执行它。那么我可以借助A链接上的ID来完成它:

$("#returnTop").click(function () {
    var speed = 500;//控制返回速度
    $('body,html').animate({scrollTop:0}, speed);
    return false;
});

通过animate这个动作,我们可以实现一个简单的动画效果,整个代码简洁明了,测试下,OK的。

在顶部时隐藏按钮

接下来实现的是在顶部时隐藏元素这个方法。

其实看明白CSS代码的人应该明白,这个盒模型在最初时因为受到.hiddened的控制,所以它一直是隐藏的。我们要做的就是在页面下拉的时候显示出来这个盒模型,然后再在页面回到顶部时用.hiddened把它隐藏掉。既然是这个思路,那么代码我们就可以简单的这样写:

$(function(){
    $(window).scroll(function() {
        var scrollY = $(document).scrollTop();
        if (scrollY <= 0){
            $('#backTop').addClass('hiddened');
        } 
        else {
            $('#backTop').removeClass('hiddened');
        }
     });
});


其实,这段代码都是不关联的。我通过两个不同的ID来分别控制它。大家也可以把这两个ID组合起来用,这就看个人需求了。当然,这个只是我初步的探讨,有更好代码的朋友请分享下,谢谢~

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: