使用jquery实现返回顶部滑动效果实例

发布时间:2017-08-14 编辑:小张个人博客 查看次数:3326

jQuery点击返回顶部的功能在网页中很常见。当网站内容过多的时候,添加一个返回顶部的功能,可以更好的增加用户体验。用jQuery写了这样一个效果。

jquery实现返回顶部功能

返回顶部按钮的一些css样式,如下:

.last{
	position: fixed;
	width: 50px;
	height: 50px;
	right: 200px;
	bottom: 55px;
	cursor: pointer;
	text-align: center;
	line-height: 50px;
	background-color: #00b7ee;
	opacity: 0.8;
	color: #fff;
}
.last:hover{
	background-color: #1fb5ad;
	color: #fff;
}

首先需要在html页面添加如下元素:

<!--返回顶部 start-->
<div class="last">
    <span> 顶部 </span>
</div>
<!--返回顶部 end-->

jquery代码

有了html和样式,我们还需要用jquery来控制返回顶部按钮,在页面滚动时淡入淡出返回顶部按钮。

<script>
    $(document).ready(function() {
        //首先将.last 隐藏
        $(".last").hide();
        //当滚动条的位置处于距顶部150像素以下时,返回顶部按钮显示,否则隐藏
        $(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() > 150) {
                    $(".last").fadeIn(1500);
                } else {
                    $(".last").fadeOut(1500);
                }
            });
            // 点击返回顶部
            $('.last').on('click',function(){
                $('html,body').animate({
                    scrollTop:0
                },500);
                return false;
            });
        });
    });
</script>

jquery实现返回顶部功能

出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号