javascript——返回顶部

最新推荐文章于 2024-10-06 12:35:17 发布

web前行者

最新推荐文章于 2024-10-06 12:35:17 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u010787396/article/details/42079315

本文介绍了一种网页设计技巧，通过CSS和JavaScript实现动态元素的显示与隐藏，以及利用滚动事件触发页面元素平滑滚动的效果。文章详细阐述了CSS定位属性、定时器和事件监听器的使用方法，旨在提升用户体验。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0 auto;
}
div{
margin: 0 auto;
width: 1000px;
background: #d3d3d3;
}
div img{
margin-left:400px;
width: 200px;
}
a{
display: none;
position:fixed; right:65px; bottom:10px;
width: 45px;
height: 45px;
background-image: url("1.jpg");
}
a:hover{
margin-left: 1190px;
width: 45px;
height: 45px;
background-image: url("2.jpg");
}
</style>
<script type="text/javascript">
window.onload=function(){
var id=document.getElementById("id");
var scrollTop=0;
//定时器
var time=null;
//可视区gaodu
var height1=document.documentElement.clientHeight;
//--------------------------------
var isTop=true;
//滚动就促发
window.onscroll=function(){
scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//如果大于可视区高度就显示
if(height1<=scrollTop){
id.style.display='block';
}else{
id.style.display='none';
}
if(!isTop){
clearInterval(time);
}
isTop=false;
}
//--------------------------------
id.onclick=function(){
//设置定时器
time=setInterval(function(){
scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var i=Math.floor(scrollTop/6);
document.documentElement.scrollTop=document.body.scrollTop=scrollTop-i;
isTop=true;
if(scrollTop<6){
document.documentElement.scrollTop=document.body.scrollTop=0;
//取消定时器
clearInterval(time);
}
},30);
}
}
</script>
</head>
<body>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div><div>
<img src="3.jpg">
</div>
<a href="javascrpt:;" id="id">
</a>
</body>

</html>

//----------------------------------------------------------------------------------------------------------

注意点：1.display: none;
position:fixed; right:65px; bottom:10px;
width: 45px;
height: 45px;--位置是固定定居

document.documentElement.scrollTop||document.body.scrollTop;

/可视区gaodu
var height1=document.documentElement.clientHeight;

time=setInterval(function(){}