平滑回到顶部

方法一 CSS

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            scroll-behavior: smooth;
        }
    </style>
</head>
 
<body>
 
    <div id="backTop">返回顶部</div>
    <script>
        const backTop = document.getElementById('backTop');
        backTop.onclick = function(){
            window.scrollTo(0,0);
        }
 
        window.onscroll = function(){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > 500){
                backTop.style.display = 'block';
            }else{
                backTop.style.display = 'none';
            }
        }
    </script>
</body>
</html>

方法二JS实现

 const backTop = document.getElementById('backTop');
  backTop.onclick = ()=>{
      window.scrollTo({
          top:0,
          behavior:'smooth'
      })
  }

posted @ 2023-12-09 17:03 Laravel自学开发阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 鼠标悬停时导航菜单下边框从中展开的效果

· 前端路由及两种实现方式

· 返回到顶部的方法有哪些？把其中一个方法出来

· 页面滚动点击返回至顶部，js怎么实现

· 来实现一个js平滑滚动到顶部的小功能

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

平滑回到顶部

方法一 CSS

方法二JS实现

随笔分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	html{
	scroll-behavior: smooth;
	}
	</style>
	</head>

	<body>

	<div id="backTop">返回顶部</div>
	<script>
	const backTop = document.getElementById('backTop');
	backTop.onclick = function(){
	window.scrollTo(0,0);
	}

	window.onscroll = function(){
	let scrollTop = document.documentElement.scrollTop \|\| document.body.scrollTop;
	if(scrollTop > 500){
	backTop.style.display = 'block';
	}else{
	backTop.style.display = 'none';
	}
	}
	</script>
	</body>
	</html>

	const backTop = document.getElementById('backTop');
	backTop.onclick = ()=>{
	window.scrollTo({
	top:0,
	behavior:'smooth'
	})
	}