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

简介: 该内容是关于网页开发的教程,介绍了两个功能的实现: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)

目录
相关文章
|
3月前
首页轮播点击展开详细说明html源码
首页轮播点击展开详细说明html源码,微信读书首页轮播源码,通过点击页面左右的箭头来切换不同的图片文字内容,图片为宽屏全屏的样式且有一个模糊的效果,文字的加载有一个时间顺序,有些类似于懒加载,整个页面是响应式的效果非常棒。
31 0
首页轮播点击展开详细说明html源码
|
5月前
|
前端开发 JavaScript
HTML的a标签如何做返回顶部的功能
HTML的a标签如何做返回顶部的功能
225 0
|
6月前
|
移动开发 JavaScript 小程序
uView BackTop 返回顶部
uView BackTop 返回顶部
87 0
|
6月前
|
JavaScript
JS点击返回顶部
JS点击返回顶部
|
JavaScript 前端开发
|
前端开发 JavaScript 数据安全/隐私保护