elementui实现 返回顶部
重要样式
.page {overflow-y: scroll;}js 获取类名.page
<div class="page" style="padding-bottom: 40px;">
<div class="toTop" @click="backTop">
<div class="h-svg-icon-wrapper svgColor svgColor2">
<div class="h-svg-icon"><!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>回到顶部</title>
<g id="前端样式优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="04首页头图1280备份" transform="translate(-1220.000000, -726.000000)">
<g id="ic_top" transform="translate(1208.000000, 714.000000)">
<g transform="translate(12.000000, 12.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path
d="M14.5518234,7.73561668 L14.6213203,7.80290795 L20.7295372,14.3160589 C21.1072675,14.7189711 21.0868534,15.3518069 20.6839411,15.7295372 C20.3120221,16.0782113 19.7441919,16.0876381 19.361939,15.7701239 L19.2704628,15.6839411 L13.4999967,9.529 L13.5,21 C13.5,21.5522847 13.0522847,22 12.5,22 C11.9477153,22 11.5,21.5522847 11.5,21 L11.4999967,9.528 L5.7295372,15.6839411 C5.35180695,16.0868534 4.71897114,16.1072675 4.31605887,15.7295372 C3.94413985,15.3808631 3.89813647,14.814821 4.1903548,14.4128993 L4.2704628,14.3160589 L10.3113884,7.87240491 C11.4445792,6.66366809 13.3430866,6.60242592 14.5518234,7.73561668 Z M19,3.5 C19.5522847,3.5 20,3.94771525 20,4.5 C20,5.05228475 19.5522847,5.5 19,5.5 L6,5.5 C5.44771525,5.5 5,5.05228475 5,4.5 C5,3.94771525 5.44771525,3.5 6,3.5 L19,3.5 Z"
id="形状结合" fill="#595959"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
backTop() {
let el = document.querySelector(".page");
console.log("el===",el.scrollTop);
let step = 0;
let interval = setInterval(() => {
if (el.scrollTop <= 0) {
clearInterval(interval);
return;
}
step += 10;
el.scrollTop -= step;
}, 20);
}vue 给.page类名的元素加上ref
<div class="page" ref="scrollContainer" style="padding-bottom: 40px;">
<div class="toTop" @click="backTop">
<div class="h-svg-icon-wrapper svgColor svgColor2">
<div class="h-svg-icon"><!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>回到顶部</title>
<g id="前端样式优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="04首页头图1280备份" transform="translate(-1220.000000, -726.000000)">
<g id="ic_top" transform="translate(1208.000000, 714.000000)">
<g transform="translate(12.000000, 12.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path
d="M14.5518234,7.73561668 L14.6213203,7.80290795 L20.7295372,14.3160589 C21.1072675,14.7189711 21.0868534,15.3518069 20.6839411,15.7295372 C20.3120221,16.0782113 19.7441919,16.0876381 19.361939,15.7701239 L19.2704628,15.6839411 L13.4999967,9.529 L13.5,21 C13.5,21.5522847 13.0522847,22 12.5,22 C11.9477153,22 11.5,21.5522847 11.5,21 L11.4999967,9.528 L5.7295372,15.6839411 C5.35180695,16.0868534 4.71897114,16.1072675 4.31605887,15.7295372 C3.94413985,15.3808631 3.89813647,14.814821 4.1903548,14.4128993 L4.2704628,14.3160589 L10.3113884,7.87240491 C11.4445792,6.66366809 13.3430866,6.60242592 14.5518234,7.73561668 Z M19,3.5 C19.5522847,3.5 20,3.94771525 20,4.5 C20,5.05228475 19.5522847,5.5 19,5.5 L6,5.5 C5.44771525,5.5 5,5.05228475 5,4.5 C5,3.94771525 5.44771525,3.5 6,3.5 L19,3.5 Z"
id="形状结合" fill="#595959"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
backTop() {
let el = this.$refs.scrollContainer;
let step = 0;
let interval = setInterval(() => {
if (el.scrollTop <= 0) {
clearInterval(interval);
return;
}
step += 10;
el.scrollTop -= step;
}, 20);
}element ui
<template>
<el-backtop target=".page" :visibility-height="100">
<div class="toTop" @click="backTop">
<div class="h-svg-icon-wrapper svgColor svgColor2">
<div class="h-svg-icon"><!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>回到顶部</title>
<g id="前端样式优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="04首页头图1280备份" transform="translate(-1220.000000, -726.000000)">
<g id="ic_top" transform="translate(1208.000000, 714.000000)">
<g transform="translate(12.000000, 12.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path
d="M14.5518234,7.73561668 L14.6213203,7.80290795 L20.7295372,14.3160589 C21.1072675,14.7189711 21.0868534,15.3518069 20.6839411,15.7295372 C20.3120221,16.0782113 19.7441919,16.0876381 19.361939,15.7701239 L19.2704628,15.6839411 L13.4999967,9.529 L13.5,21 C13.5,21.5522847 13.0522847,22 12.5,22 C11.9477153,22 11.5,21.5522847 11.5,21 L11.4999967,9.528 L5.7295372,15.6839411 C5.35180695,16.0868534 4.71897114,16.1072675 4.31605887,15.7295372 C3.94413985,15.3808631 3.89813647,14.814821 4.1903548,14.4128993 L4.2704628,14.3160589 L10.3113884,7.87240491 C11.4445792,6.66366809 13.3430866,6.60242592 14.5518234,7.73561668 Z M19,3.5 C19.5522847,3.5 20,3.94771525 20,4.5 C20,5.05228475 19.5522847,5.5 19,5.5 L6,5.5 C5.44771525,5.5 5,5.05228475 5,4.5 C5,3.94771525 5.44771525,3.5 6,3.5 L19,3.5 Z"
id="形状结合" fill="#595959"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</el-backtop>
</template>