css实现返回首部和滚动监听的原理

最新推荐文章于 2022-06-24 15:37:24 发布
最新推荐文章于 2022-06-24 15:37:24 发布
阅读量1.5k 收藏
点赞数
分类专栏： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35532442/article/details/74447219
版权

 在页面中实现返回首部  原理将<a>连接到顶部的其中一个标签 当点击这个链接时  可以实现返回顶部 js 在里面实现返回图标的出现

注意的是实现的逻辑为  考察滚动条距离顶部的距离

方法为

document.documentElement.scrollTop
document.body.scrollTop

凡人在世
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
写了一个简单的监听滚动条事件
J20220913的博客
02-09 203
手写一个简单的 监听 滚动条事件
js 监听css,Js判断CSS文件加载完毕的具体实现
weixin_39980360的博客
08-03 957
要判断这个 CSS 文件是否加载完毕，各个浏览器的做法差异比较大，这次要说IE浏览器做的不错，我们可以直接通过onload方法来处理CSS加载完成以后的处理：// 代码节选至seajsfunction styleOnload(node, callback) {// for IE6-9 and Operaif (node.attachEvent) {node.attachEvent('onload'...
CSS | 如何达到监听页面滚动的效果？
闫小样的博客
06-24 3042
在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。
Bootstrap系列之滚动监听（Scrollspy）
老__L的博客
06-19 2964
滚动监听（Scrollspy）
css3设置滚动监听,小程序滚动监听，并动画控制某元素的显示隐藏
weixin_35508482的博客
08-04 1201
场景：当页面滚动高度超过元素1高度时，元素2(动画的)显示或隐藏。在小程序中如何做到滚动监听并动态获取元素高度呢？在开发者工具中预览效果f0g2j-tutqz.gif解决思路:1.在页面渲染完成后(onReady函数里) 去获取元素1在页面上距离顶部的高度fixedTop；2.用监听页面滚动函数 onPageScroll得到当前页面滚动高度，注意，这里得到的高度是“页面在垂直防线已滚动的距离(单位...
纯css实现无缝滚动
09-03
消息列表向上滚动，不使用js操作，纯css3实现向上无缝滚动。
css实现图片横向排列滚动效果
09-27
主要介绍了css实现图片横向排列滚动效果,需要的朋友可以参考下
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
利用CSS3实现的文字定时向上滚动
09-24
大家以前基本是用Javascript来实现文字定时向上滚动的效果，那么今天小编给大家分享下利用CSS3来实现这一效果，有需要的可以参考学习。
CSS3实现精美横向滚动菜单按钮
09-27
今天给大家分享基于css3实现精美横向滚动菜单按钮，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
滚动条中元素是DIV 的解决方案并判断是否到了最右边
05-21
解决了 滚动条中元素是DIV 导致的问题
CSS实现自定义滑动条(input)，动态监听改变数值
weixin_42063071的博客
06-04 6820
有时候我们需要一个滑杆滑动，可以移动的同时，还能够获取到从小到大的数值，如图：向后滑动值越大，能够做到实时监听。我的可能不是最优解决方案，仅供大家参考！代码如下：这是建立一个input元素，最小值为0，最大值为100，每次加1，默认值为10.&lt;input type="range" min="0" max="100" step="1" value="10"&gt;样式如下：input[ty
监听页面中的某个div的滚动事件，判断滚动的位置
热门推荐
little_kid_pea的博客
09-18 6万+
页面描述：页面分为左右两个部分，左边是目录树，右边是id=main_box的div，在main_box中含有多个div并列，上下排布，数量较多，页面上放不下，所以设置了main_box的css样式： .main_box { overflow-y:scroll; } 让main_box可以滚动，但是我希望知道滚动到哪个子div了，好让左边的目录树对应的节点高亮显示 mounted(...
js监听鼠标的滚轮滚动事件
qq_41756580的博客
07-24 1万+
不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件。 具体实现：1. 需要添加事件监听，代码如下：兼容firefox采用addEventListener监听 windowAddM...
css滚动条
qq_45889379的博客
06-14 2336
此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：滚动条组成部分 滚动条组成结构图如下： 其他设置项： 实例： 效果如下如： 注意只在chrome下有效！::-webkit-scrollbar{}这种写法改变的是全局的滚动条。...
BootStrap-CSS样式_插件_滚动监听（Scrollspy）插件
LoveyourselfJiuhao的博客
01-02 1039
滚动监听（Scrollspy）插件 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航 目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。   如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用...
返回到顶部代码
elsery
04-05 1780
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){
滚动监听html+css+js代码下滑隐藏
最新发布
08-12
滚动监听是指当用户滚动页面时，可以通过HTML、CSS和JS代码实现一些特定...综上所述，通过HTML、CSS和JS代码的配合，我们可以实现滚动监听下滑隐藏的效果。当页面向下滚动时，某个元素会逐渐隐藏，直到完全消失不可见。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值