javascript页面返回顶部吸顶效果,导航栏吸顶,缓慢返回顶部,

最新推荐文章于 2024-09-22 21:29:22 发布

仰望星空001

最新推荐文章于 2024-09-22 21:29:22 发布

阅读量331

点赞数 1

本文链接：https://blog.csdn.net/weixin_45789271/article/details/102846631

版权

本文详细介绍了如何使用JavaScript实现页面滚动时导航栏的吸顶效果，以及平滑返回页面顶部的功能。通过监听滚动事件，动态调整元素定位，确保导航栏在滚动到一定位置后固定在屏幕顶部。同时，介绍了一个优雅的回顶按钮，当用户滚动到页面底部时逐渐显示，点击后页面会缓缓滚动回到顶部，提供更好的用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0; padding: 0;}
    html,body{height: 6000px; width: 100%;}
	
	.logo{
		width: 100%;
		height: 100px;
		background: palevioletred;
	}
    .toubu{
        margin: 0 auto;
        width: 1256px;
        height: 48px;
        border-bottom: 2px solid red;
		
		opacity: 1;
		
		top: 300px;
		
    }
    .toubu .nav{
        margin: 0 auto;
        width: 986px;
        height: 48px;
      display: flex;
	  /* justify-content: space-between; */
	  align-items: center;
	    background: #FFF;
	    border: 1px solid red;
		
    }
    .toubu .nav .left{
        width: 100px;
        height: 30px;
       
		margin-left: 16px;
		background:url(logo1.png) no-repeat center center;
		background-size: 100% 100%;
    }

    .toubu .nav .center{
        width: 486px;
        height: 34px;
        background: #e2231a;
		margin-left: 106px;
		display: flex;
		justify-content: space-between;
		align-items: center;
            }
			
  .toubu .nav .center form{
	  margin-left: 2px;
	  width: 425px;
	  height: 30px;
	  background: #fff;
	 
  }
  .toubu .nav .center input{
	  width: 425px;
	  height: 30px;
	  border: none;
	  background: url(xj.png) no-repeat 380px center;
  }
  
  .toubu .nav .center #sub{
	  background: #e2231a;
	  background: url(fdj.png) no-repeat center center;
  }
    .toubu .nav .right{
        width: 130px;
        height: 32px;
        border: 1px solid rosybrown;
        background:pink;
		margin-left: 18px;
		background:url(gwc.png) no-repeat 18px center;
		
    }
	 .toubu .nav .right p{
		 font-size: 12px;
		 text-align: center;
		 line-height: 32px;
		 margin-left: 50px;
		
	 }
	
	.ret{
		width: 50px;
		height: 50px;
		background: #008000;
		font-size: 32px;
		color: #F1F1F1;
		text-align: center;
		line-height: 50px;
		position: fixed;
		right: 20px;
		bottom: 20px;
		opacity: 0;
	}
    </style>
</head>
<body>
<div class="logo"></div>
    <div class="toubu">
        <div class="nav">
            <div class="left"></div>
            <div class="center">
				<form action="" method="">
					<input type="text" name="" id="" value="矿泉水" />
					
				</form>
				<input type="button" name="" id="sub" value="" />
			</div>
            <div class="right">
				
			<p>我的购物车</p>
			</div>
        </div>
    </div>
	<div class="ret">
		<bottom>^</bottom>
	</div>
	
	<script type="text/javascript">
		//通过函数封装获取元素
		 function $(id){
			 return document.querySelector(id)
		 }
		 var toubu = $(".toubu")
		 var ret = $(".ret")
		
		//绑定浏览器页面滚动事件,触发函数执行
		onscroll =function(){
			//浏览器滚动事件兼容写法
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			//判断条件 当浏览器页面大于100的时候 ,执行吸顶效果,固定
			if(scrollTop>100){
				toubu.style.position="fixed";
				//固定在top:0
				toubu.style.top="0"
				//过度2s
				toubu.style.transition="all 2s"
				
				//浏览器页面大于100的时候,出现返回顶部的按钮
				ret.style.opacity="1"
				ret.style.transition="all 2s"
			}else{
				//若小于100,那么久执行以下代码
				toubu.style.opacity="1"
				ret.style.opacity="0"
				toubu.style.top="100px"
			}
		}
	

	//判断点击事件,触发返回顶部效果
		ret.onclick=function(){
		
			//开启定时器,执行函数里面的条件语句
			time= setInterval(function(){
				//浏览器滚动事件兼容写法
				var topp = document.documentElement.scrollTop || document.body.scrollTop;
				//怕判断当浏览器页面大于0 的时候,点击按钮是页面返回顶部
				 if(topp > 0){
					 //在定时器执行一次的时候(定时器设置的是0.0003秒一次) 让页面减30.,循环,从而使得页面缓慢返回顶部,不会突然跳到顶部.....
					  document.documentElement.scrollTop -=30
				 }else{
					 document.body.scrollTop -=30
					 
				 }
				
				  
				
				  
				// console.log(topp)
				 // console.log("执行了从"+topp)
				  
				  
				 //当页面高度为0 的时候,关闭定时器
				 if(topp == 0){
					 clearInterval(time)
					 }
				 
				
			 },30)
		}
		
		
	</script>
</body>
</html>