jQuery制作返回顶部按钮

最新推荐文章于 2023-11-12 19:12:34 发布

yzmspirit

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量436

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/yzmspirit/article/details/38493015

Web前端专栏收录该内容

1 篇文章

订阅专栏

本文将指导您如何使用jQuery创建一个返回顶部按钮，通过在HTML文档中添加元素并设置CSS样式，结合JavaScript监听滚动事件，实现按钮在页面滚动时显示与隐藏的功能，提升用户体验。

在如今的网页中，各类人性化的设计层次不穷，在网页文档末尾添加一个返回顶部按钮看似是一个很小的举动，却为整个网页的友好型加分不少，下面就利用jQuery一起制作一个简单的返回顶部按钮。

首先，我们需要在html文档中添加元素，就像这样：

<div id="scrollTop"></div>

然后为它添加一个样式，这而我们要考虑到按钮应该处于页面的哪个地方，常见的是一直存在在我们所见区域的右边，那么我们只要简单使用position:fixed来固定它。另外一种是放在文档底部，滑动到那个地方的时候就显示出来。这儿我们只做第一种。

css样式如下：

#scrollTop {
	width: 30px;
	height: 30px;
	background: url(../image/scrolltop.png) no-repeat;
	position: fixed;
	right: 20px;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

#scrollTop:hover{
	opacity: 1;
	filter: alpha(opacity=100);
	cursor: pointer;
}

这儿我们没有设置#scrollTop的top值，因为我们要根据浏览器窗体的大小动态设置，所以在js文件中进行设置。

$(document).ready(function(){ 
	//定位按钮高度且隐藏按钮
    $('#scrollTop').css({top:$(window).height()-80}).hide();
    //监听滚轮滑动事件
    $(window).scroll(function() {
        $(window).scrollTop() >0 ? $('#scrollTop').fadeIn(400) : $('#scrollTop').fadeOut(400);
    });
    //监听按钮点击事件
    $('#scrollTop').bind('click',function(){
    	$('body,html').animate({'scrollTop':0},800,'swing');
    });
});

注意这个地方：

$('body,html').animate({'scrollTop':0},800,'swing');

需要写上body和html两个元素，如果不写body，chrome下不能用FF下能用，不写html则相反。具体原因请去了解body和html的区别。

这样一个简单的返回顶部按钮就只做完成了，是不是很简单。

demo下载