【返回顶部】功能

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

Mael-csd

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

阅读量623

点赞数

HTML /CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2. 【返回顶部】的滚动

【返回顶部】的位置应该是固定的，例如在右下角。实现方法：

1. 使用相对定位，根据浏览器滚动条的位置设置【返回顶部】的位置。

这个做法很简单，通过动态改变位置即可。但由于使用了相对定位，每次都是移动位置实现的，所以如果操作快一点，就会出现闪烁。所以推荐使用方法 2。

2. 使用绝对定位，通过判断距离来显示和隐藏【返回顶部】，这样就可以避免闪烁。但会有一些浏览器兼容的问题，下面就来分析问题和提供解决方法。

3. 使用 html + css 设置【返回顶部】在右下角

[html]

<div id="toTop">
<em>返回顶部</em>
</div>

<!--测试-->
<div id="toTop">
<em>返回顶部</em>
</div>

[html]

#toTop {
width:14px;
height:65px;
position:fixed;
right:30px;
bottom:50px;
background:gray;
padding:5px;
color:#fff;
font:12px Arial;
cursor:pointer;
display:none;
}

#toTop { 
	width:14px;
	height:65px;
	position:fixed;	
	right:30px;
	bottom:50px;
	background:gray; 	 
	padding:5px;
	color:#fff; 
	font:12px Arial;
	cursor:pointer; 
	display:none;
}

通过这样设置，在 Chrome FireFox 就可以实现了。IE8 里要引入：

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这样在 Chrome FireFox IE8+ 就都实现了。但 IE8- 不支持 position:fixed 这个绝对定位，如果我们用IE6查看（使用IETester），就会发现这个 div 还是在左上角。（万恶的 IE6...不说了）

要解决这个问题，网上的方法，都有些太复杂有些无法实现，这里是一个比较好的做法。加入如下选择器：

[html]

/*以下设置是为了兼容 IE8- */
* html #toTop{
position:absolute;
right:30px;
}
* html body{
height:100%;
overflow-y:auto;
}
* html{
overflow-x:auto;
overflow-y:hidden;
}

/*以下 设置是为了兼容 IE8- */
* html #toTop{
	position:absolute; 
	right:30px;
}

* html body{
	height:100%;
	overflow-y:auto;
}

* html{
	overflow-x:auto; 
	overflow-y:hidden;
}

也就是显示的滚动条是 body 的。

这样就将 div 设置到右下角了。但这样还会出现一个新的问题。

4. scroll 事件

通过上面的做法，我们只要捕捉 window 的 scroll 事件，然后根据判断距离控制 display 为 none 或者 bloc即可。在 Chrome FireFox IE8+ 也都测试正常。但...... IE6 测试又出现问题，滚动不会动态显示和隐藏 div。

通过分析发现，IE6里认为滚动的是 body 的 scroll 事件，而不是 window 的。所以如果捕捉 body 的 scroll 事件是可以实现的。这就要求要兼容这两种情况...

兼容的写法是：分开判断 IE8- 还是其它浏览器。

网上有许多判断 IE 浏览器版本的写法。根据实际情况，这里找了更简单的方法。看到上面最后三个 css 是给 IE8-使用的，所以在 IE8- 里，overflow-y 为 hidden，而其它浏览器为 visible。

* 貌似 IE7 没有 overflow-y 属性。因为我的 IETester IE7 浏览器运行不了，所以没有测试。有需要可以测试一下，或者写 js 判断浏览器的版本。

如下：

[javascript]

$(function(){
//兼容写法：根据 body 的 overflow-y 属性判断
var top = $("body").css("overflow-y");
if(top == 'visible')
$(window).scroll(function(){
var ins = $(document).scrollTop();
goTop(ins);
});
else
$("body").scroll(function(){
var ins = $("body").scrollTop();
goTop(ins);
});
function goTop(ins){
if(ins > 30)
$("#toTop").css("display","block");
else
$("#toTop").css("display","none");
}
})

$(function(){	    
    //兼容写法：根据 body 的 overflow-y 属性判断
    var top = $("body").css("overflow-y"); 		
    if(top == 'visible')
	 $(window).scroll(function(){
		 var ins = $(document).scrollTop();
		 goTop(ins);
	 });
	else
	 $("body").scroll(function(){
		 var ins = $("body").scrollTop();	
		 goTop(ins);
	 });	  

    function goTop(ins){			        
		if(ins > 30)		  
			$("#toTop").css("display","block");
		else
			$("#toTop").css("display","none");
	}
})

这样，一个右下角的【返回顶部】就可以在各个浏览器显示了。

5. 点击【返回顶部】

有两种实现的方法。

1 是如这里使用的，使用 jQuery实现，代码很简单。如下：

[html]

//点击【返回顶部】
$("#toTop").click(function(){
$("#toTop").css("display","none");
$(document).scrollTop(0);
})

	 //点击【返回顶部】
	 $("#toTop").click(function(){
		 $("#toTop").css("display","none");
		 $(document).scrollTop(0);
	 })

2. 我们知道如果指定 <a> 标签的 href 属性为 “#” 的话，也可以实现返回顶部。所以用一个 <a> 标签签入【返回顶部】，然后设置 href = “#” 也可以实现

Mael-csd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【返回顶部】功能

2. 【返回顶部】的滚动【返回顶部】的位置应该是固定的，例如在右下角。实现方法： 1. 使用相对定位，根据浏览器滚动条的位置设置【返回顶部】的位置。这个做法很简单，通过动态改变位置即可。但由于使用了相对定位，每次都是移动位置实现的，所以如果操作快一点，就会出现闪烁。所以推荐使用方法 2。 2. 使用绝对定位，通过判断距离来显示和隐藏【返回顶部】，这
复制链接

扫一扫