滚动条+返回顶部

最新推荐文章于 2023-11-23 16:13:36 发布

毛崽

最新推荐文章于 2023-11-23 16:13:36 发布

阅读量1k

点赞数

文章标签： vue.js js

本文链接：https://blog.csdn.net/weixin_56290677/article/details/116054535

版权

js实现滚动+返回顶部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回顶部</title>
		<style type="text/css">
/*
 1.关于overflow属性——当内容溢出元素框时
属性值
 - visible(默认值):内容不会被修剪，会呈现在元素框之外
 - auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。√
 - hidden:内容会被修剪，并且其余内容是不可见的。
 - scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
 - inherit	规定应该从父元素继承 overflow 属性的值。
*/
			/* 页面滚动条隐藏并且不影响滚动效果 */
			#whold::-webkit-scrollbar {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="whold" style="border: 1px solid black;width: 100%;height: 700px;overflow: auto">
			<div id="onebox" style="width: 100%;height: 1100px;background-color: wheat;">
				页面
				<button id="butbox" onclick="butevent()" style="position: fixed;bottom: 10px;right: 20px;display: none;">返回顶部</button>
			</div>
		</div>
		
		<script type="text/javascript">
			// 滚动事件
			document.getElementById("whold").onscroll  = function() {
				topFunction()
			};
			
			function topFunction() {
				// document.getElementById("whold")获取到whold节点， scrollTop返回或设置被匹配元素的滚动条的垂直位置
				console.log(document.getElementById("whold").scrollTop)
				 //如果是整个页面滚动返回顶部的话，可以直接用以下注释的判断替换
				// if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
				if(document.getElementById("whold").scrollTop > 200){
					document.getElementById("butbox").style.display = "block"
				}else{
					document.getElementById("butbox").style.display = "none"
				}
			}
			function butevent(){
				document.getElementById("whold").scrollTop = 0;
				document.getElementById("whold").scrollTop = 0;
				// document.body.scrollTop = 0;
				// document.documentElement.scrollTop = 0;
			}
			
		</script>
	</body>
</html>

vue+element实现滚动条+返回顶部

<!-- viewbox盒子需要有个固定高度   -->
<el-main class="viewbox">
<!-- element中的隐藏滚动组件  -->
	<el-scrollbar class="scrollbarBox" style="height: 100%;width: 100%;overflow: auto;">
		<router-view class="router"></router-view>
	</el-scrollbar>
	<!-- 返回顶部  -->
	<template>
	//这里的类名需要给固定高度身上
	  <el-backtop target=".el-scrollbar__wrap" :bottom="100">
	    <div style="height: 100%;width: 100%;background-color: #f2f5f6; box-shadow: 0 0 6px rgba(0,0,0, .12);
	        text-align: center; line-height: 40px;color: #1989fa;" class="el-icon-s-home"></div>
	  </el-backtop>
	</template>
</el-main>

毛崽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动条+返回顶部

1.js实现滚动条+返回顶部<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>返回顶部</title> <style type="text/css">/* 1.关于overflow属性——当内容溢出元素框时属性值 - visible(默认值):内容不会被修剪，会呈现在元素框之外 - auto 如果内容被修剪，则浏览器会显示滚动条以
复制链接

扫一扫