回到顶部功能

开发工具与关键技术:Visual Studio
作者:林耀
撰写时间:2019.08.18


很多网页都会有的这个功能,当我们看网页的时候看到很下面了,例如想回到顶部导航栏的时候,就要滑动好一会才可以,所以就用了这个返回顶部的功能,能够让我们的效率更快,先说一下这个功能的思路吧,首先是当我们向下滑动页面到一定的高度时,这个图标就会出来,然后点击图标就可以把页面给返回到顶部了。

以下我们放上代码的图片吧:
首先这里是html的代码

![在这里插入图片描述](https://img-blog.csdnimg.cn/2019081808073788.jpg)
这里作为例子就直接用了个A标签了,再加上ID就好了。


![在这里插入图片描述](https://img-blog.csdnimg.cn/20190818080757481.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDM0Mw==,size_16,color_FFFFFF,t_70)

这里就是JQuery 的代码了。

思路和上面说的一样。
可以通过以下几种方式实现 Vue 的回到顶部功能: 1. 使用 Vue 插件:可以使用现有的 Vue 插件来实现回到顶部功能,例如 vue-backtotop、vue-go-top 等。 2. 自定义指令:可以编写一个自定义指令来实现回到顶部功能,例如: ```javascript Vue.directive('scroll', { inserted: function (el, binding) { let f = function (evt) { if (binding.value(evt, el)) { window.scrollTo(0, 0); } }; el.__vueScroll__ = f; window.addEventListener('scroll', f); }, unbind: function (el) { window.removeEventListener('scroll', el.__vueScroll__); el.__vueScroll__ = null; }, }); ``` 然后在组件中使用 v-scroll 指令即可。 3. 使用组件:可以编写一个回到顶部的组件,例如: ```javascript <template> <div class="back-to-top" v-if="show" @click="scrollTop"> <i class="fa fa-chevron-up"></i> </div> </template> <script> export default { data() { return { show: false, }; }, created() { window.addEventListener('scroll', this.handleScroll); }, destroyed() { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { this.show = window.pageYOffset > 100; }, scrollTop() { window.scrollTo({ top: 0, behavior: 'smooth', }); }, }, }; </script> <style scoped> .back-to-top { position: fixed; bottom: 20px; right: 20px; background: #333; color: #fff; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 2px; cursor: pointer; transition: opacity 0.2s ease-out; } .back-to-top:hover { opacity: 0.8; } </style> ``` 然后在需要使用的组件中引入该组件即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值