给你的网站加一个简单的返回顶部

简介: 该内容是关于网页开发的教程,介绍了两个功能的实现:1) 当页面滑动到一定位置时,通过if判断显示或隐藏返回顶部按钮;2) 点击返回顶部按钮,利用`window.scroll(0,0)`使页面返回到顶部。示例中包括CSS和HTML用于创建返回顶部按钮,并用JavaScript监听滚动事件和处理点击事件。

工具:灵巧的小手

要实现的功能分别为:

1.当滑动到一定位置,返回顶部按钮的显示与消失。(用if判断)

2.点击返回顶部按钮,返回到顶部。(使用window.scroll(0,0))

css和html部分:

首先我们的页面需要一个返回顶部的按钮,用户用来点击(必须使用固定定位定位不然它就跟页面走了,然后在css中让它的display: none;)。

js部分:

获取按钮,body主页高度,通过window.pageYOffset 获取滑动的高度, 滑动大于1/3时,让它显示,小于隐藏

点击返回顶部使用window.scroll(0,0)

目录
相关文章
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
481 0
|
UED SEO 搜索推荐
网站底部应该怎样进行seo优化
网站底部一定要做好广州seo优化基础工作,这样做可以使用户看起来很清爽,从而提高用户体验度,并且可以使搜索引擎感受到网站是简洁而不简单,会增加网站的收录。
4568 0
|
7月前
|
前端开发
首页变灰 实现
首页变灰 实现
首页变灰 实现
|
前端开发 数据安全/隐私保护
网页|利用提示框(Tooltip)实现弹窗效果
网页|利用提示框(Tooltip)实现弹窗效果
599 0
|
前端开发
CSS——小米首页悬浮栏效果
小米首页悬浮栏效果
125 0
|
缓存 JavaScript 前端开发
如何解决超链接被点击后hover样式不出现的问题?
如何解决超链接被点击后hover样式不出现的问题?
742 0
|
小程序 前端开发 搜索推荐
微信小程序--》tabBar底部栏
⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。
742 0
微信小程序--》tabBar底部栏
|
JavaScript 前端开发
点击遮罩层的背景关闭遮罩层(HTML)
点击遮罩层的背景关闭遮罩层(HTML)
215 0
点击遮罩层的背景关闭遮罩层(HTML)
直播网站源码,显示隐藏标题栏
直播网站源码,显示隐藏标题栏
319 0
移动端弹出遮罩层时防止底部页面滚动
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696872 ...
1466 0

热门文章

最新文章