纯前端实现页面的回到顶部和回到底部功能

方法一：使用element ui的回到顶部组件实现回到顶部功能：

<template><div class="wraper"><template>Scroll down to see the bottom-right button.<el-backtop target=".wraper"><divstyle="{height: 100%;width: 100%;background-color: #f2f5f6;box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);text-align: center;line-height: 40px;color: #1989fa;}">UP</div></el-backtop></template><div v-for="(item, i) in 10000" :key="i">返回顶部</div></div>
</template><style>
.wraper {width: 1000px;height: 100px;overflow-x: hidden;overflow-y: auto;background: #000;
}
</style>

【注意】: target的值是需要滚动的容器的类名，该容器需要指定高度以及overflow-y: auto;，否则el-backtop组件不生效

方法二：利用js的原生方法scrollIntoView()实现回到顶部和回到底部功能，在滚动容器的顶部和底部设置两个锚点

<template><div class="wraper" @mousewheel="scrollChange" ref="scrollview"><div id="topTarget"></div><buttonid="test"style="position: fixed; right: 0; bottom: 30px"@click="toTop"v-show="isScroll">回到顶部</button><buttonid="test"style="position: fixed; right: 0; bottom: 0"@click="toBottom">回到底部</button><div v-for="(item, i) in 10000" :key="i">返回顶部</div><div id="bottomTarget"></div></div>
</template>
<script>
export default {data() {return {scroll: "",isScroll: false,};},mounted() {// 获取指定元素const scrollview = this.$refs["scrollview"];// 添加滚动监听，该滚动监听了拖拽滚动条// 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调scrollview.addEventListener("scroll", this.scrollChange, true);},beforeDestroy() {// 获取指定元素const scrollview = this.$refs["scrollview"];// 移除监听scrollview.removeEventListener("scroll", this.scrollChange, true);},methods: {// 滚动监听，滚动到一定距离才出现回到顶部的按钮scrollChange(e) {console.log("滚动中", e.offsetY);if (e.offsetY > 50) {this.isScroll = true;}},toTop() {topTarget.scrollIntoView();},toBottom() {bottomTarget.scrollIntoView();},},
};
</script>
<style>
.wraper {width: 1000px;height: 100px;overflow-x: hidden;overflow-y: auto;background: #000;position: relative;
}
</style>

纯前端实现页面的回到顶部和回到底部功能相关推荐

html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...
jq怎么回到顶部和回到尾部_回到学校系列为孩子们提供开放资源
jq怎么回到顶部和回到尾部全球各地的孩子们都回到学校了! 有没有比免费和开放的教育资源和工具更好的帮助他们成长并充分利用学校的方法? Opensource.com将于9月8日至19日举办为期两周的开 ...
html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
html页面刷新回到顶部_HTML5 回到顶部
图片: html 回到顶部 css *{ margin: 0; padding: 0; } .box { width:1000px; margin: 0 auto; } #btn { width:40 ...
HTML学习笔记之二（回到顶部与回到底部）
回到顶部回到底部回到顶部的俩种方式一.使用js [javascript] view plaincopy $('html, body').animate({ scrollTop: 0 }, 'fa ...
vue中平滑地回到顶部，回到底部
监听的滚动条需要平稳滑动,所以设置几个值,一个定时器.一个定义的scrollTop,方便后续操作 data(){scrollTop: 0,timer: null,scrollBottom: 0,tim ...
纯前端JS实现一个登记照改换底色背景色功能
说到登记照改换底色功能的实现,我想大部分人都会认为使用opencv或者机器学习方法对图像进行图像分割.边缘检测.基于语义的物体检测.无监督的像素分类算法等等算法是最好的途径. 而我最近实现了一个登记照 ...
Vue-router: 实现纯前端多页面应用（Vuecli+Element UI）
1.简介 1.1 为什么要用Vue-router 我想做一个带导航栏的简单web页面,页面的内容可以随导航栏的点击切换.第一个想法是想用webpack打包出几个页面,然后在每个页面的按钮上添加链接,但 ...
纯前端提示页面版本更新
最近有这样一个需求,客户正在使用页面,这时进行版本更新,客户不退出页面一直操作的都是老的版本,需要提醒客户版本已经更新,使用最新的版本. 因项目使用的是webpack+Vue+elementUI,在w ...
回到顶部和回到底部动画
$("#dwn").click(function() {$('html,body').animate({scrollTop: $(document).height()}, 600) ...

纯前端实现页面的回到顶部和回到底部功能

纯前端实现页面的回到顶部和回到底部功能相关推荐

最新文章

热门文章