首页 > TAG信息列表 > GoTop
【JS】使用JS实现回到顶部按钮功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim15.blog前端-博客首页
App.vue <template> <div id="app"> <!--博客首页显示--> <router-view> </router-view> <!--回到顶部的组件--> <go-top></go-top> </div> </template> <script> import GoTop回到顶部的方法
思路: 【1】获取屏幕滚动条的高度 通过document.documentElement.scrollTop来获取滚动条距离最顶端的距离(0 ~ 文档高度减去滚动条长度) 【2】通过函数function getHeight()来判断显示还是隐藏回到顶部的菜单 【3】通过window.onscroll监听页面滚动的方 <!DOCTYPE html> <hGoTop给网站加一个悬挂猫效果上吊猫
简介: GoTop给网站加一个悬挂猫效果上吊猫是一个超级可爱的文章小插件,其主要功能就是帮助用户在浏览的网站界面添加一个点击小猫之后回到网页顶部的效果,具体样式可以参考下文图示,相信不少朋友们都会喜欢,真的很可爱,感兴趣的话可以按照下文使用方法操作安装哦~ 插件效果: 点击小Vue点击按钮,回到顶部
HTML <div class="footer"> <div class="gotop" v-show="gotop" @click="toTop">Top</div> </div> css .footer .gotop { text-align: center; position: fixed; right: 50px; bottom: 30px;