记录浏览器滚动条位置

最新推荐文章于 2024-07-26 14:24:59 发布

亲亲海边草

最新推荐文章于 2024-07-26 14:24:59 发布

阅读量3.3k

点赞数 1

分类专栏： web前端文章标签： js jquery 滚动条

本文链接：https://blog.csdn.net/guo273559625/article/details/50556826

版权

本文介绍了如何在JavaScript和jQuery中记录和定位浏览器滚动条位置。包括使用瞄定位、原生JS方法如scrollIntoView()、获取scrollTop和scrollLeft、jQuery的position与offset方法，以及获取当前窗口滚动位置的各种方式。

摘要由CSDN通过智能技术生成

1，使用瞄定位,href="#guo",指向name或者id为guo的元素,使用name定位只对a标签有用

2，用原生js方法，name.id.class

document.getElementById ("guo"). scrollIntoView()

document.getElementsByName ("guo")[0]. scrollIntoView()

3，js定位

document.getElementById ("message"). scrollTop document.getElementById ("message"). scrollLeft

document.getElementById ("message"). offsetTop

4，jquery定位,position与offset

offfse

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

亲亲海边草

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

原生js仿浏览器滚动条效果

10-20

仿浏览器滚动条 *{margin: 0;padding: 0;} #demo{width: 300px;height: 500px;border: 1px solid red;margin:100px;position:relative;overflow:hidden;} p{padding:5px 20px 5px 5px;font-size:26px;position...

移动端页面跳转记录滚动位置

weixin_42995152的博客

07-14

773

在此之前，首先了解下事件和属性的使用：描述：当元素的滚动条滚动时触发的时间。 onscroll 事件的定义与触发条件事件可以被任何元素绑定，包括、、。默认初始情况下，只有对象拥有事件的定义与触发条件。这是因为对象包含的页面默认是当页面高度过大时自动出现滚动条，即对象自带属性，同时它也具备固定的高度，所以可以触发事件。也就是说，只有定义了 overflow: auto|scroll; 内容超过出现滚动条、且给定了 height 的元素本身，才能定义与触发

参与评论您还未登录，请先登录后发表或查看评论

JS（JavaScript）详解

weixin_53455615的博客

09-19

7842

JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。JavaScript组成ECMAScript：JavaScript的核心，语法格式，使用方法文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。

JS 学习笔记

最新发布

weixin_53656360的博客

07-26

839

其实每一个js函数都是闭包，js函数的顶层作用域是window对象，js执行环境本身就是一个全局作用域，每一个函数都可以认为是全局的子作用域，可以理解为闭包。

JS快速入门

白豆五的博客

12-05

5922

JavaScript （简称JS），是一门跨平台、面向对象的脚本语言（弱类型语言），而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

前端基础--JavaScript

qq_50048558的博客

08-22

2775

HTML HTML介绍 & 规范介绍 HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language). 专门制作网页的计算机语言. 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。记事本开发第一个网页 <html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>

JavaScript 基础（超详细）

TKOP_的博客

03-02

1万+

这篇笔记大概囊括了 JavaScript 基础的所有知识点。适合 js 初学者去查看特定知识点或者已经自学完 js 的伙伴去完成查漏补缺的过程。知识点的梳理参照了《JavaScript 高级程序设计》的内容，所以这算是一篇读书笔记。知识点的具体介绍主要有书中重要讲述、代码示例、思维图表、重难点解析、个人思考总结和他人的启发。虽不敢说这是最详细的笔记，但对于每个知识我都会尽力将自己的所思所想清楚地记录下来并分享。

js实现页面刷新滚动条位置不变

10-21

总结来说，页面刷新后滚动条位置保持不变可以通过JavaScript在客户端记录和恢复滚动位置实现。使用localStorage或其他客户端存储方式存储滚动位置，并在页面加载完成后恢复。需要注意的是，实现这样的功能可能需要...

js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

10-20

最后，需要注意页面的跨浏览器兼容性问题，因为不同浏览器可能对滚动条位置的处理有所差异。同时，对于大容量的滚动位置信息，使用Cookie可能不是一个最佳选择，考虑使用LocalStorage或SessionStorage来代替，它们...

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

10-28

从给定文件的标题和描述来看，本篇文档主要介绍了在***网站开发中，如何利用jQuery实现类似于腾讯微博的滚动浏览器滚动条加载数据的功能。下面将详细展开介绍相关知识点。首先，要实现滚动加载数据，需要借助于...

h5下拉刷新上拉加载滚动条位置

12-21

而滚动条位置的问题则关系到用户体验的连贯性，确保用户在离开页面后再次返回时，能够直接回到之前查看的位置，这是现代Web应用优化的重要部分。 1. **H5页面返回**：在H5页面间进行导航时，用户可能会通过浏览器的...

JS入门到精通完整版

热门推荐

qq_46362763的博客

08-08

1万+

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。.....................

javascript基础

m0_62452636的博客

06-08

2572

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

什么是js?js的基本使用

weixin_43465508的博客

04-10

5196

JavaScript（简称“js”）是一种具有函数优先的轻量级，解释型或即时编译型的编译语言虽然它是作为开发WEB页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

js核心基本语法（全面）

weixin_60941411的博客

04-09

3473

const：const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后的值不可再修改，const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN。如果我们在js中写的方法都是全局的方法，在需要嵌入到别人的界面中的时候，这些全局的东西很可能会和别人的东西重名从而引发错误，所以说需要用js闭包包起来。

javascript基础入门教程,javascript零基础入门

阿发狗伪原创

10-24

1192

一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了python for语句用法。//局部变量用let定义let 变量名 = 值;//全局变量用var定义var 变量名 = 值;//常量定义 constconst 常量名 = 值;//整数类型var a=3;// Boolean类型var b=true;// 定义小数类型小数和整数类型统称为number类型。

JS常用语法归纳（全）

nx_live的博客

04-24

4599

JS基础语法归纳，快速掌握JS语言

JavaScript基础（超详细全文约一万字）

bguihiub的博客

02-10

8665

回顾整个JavaScript的发展历程, 实际上就是Web发展的历程从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.

JavaWeb系列三: JavaScript学习上

你好, 我在学java的博客

03-10

4879

JavaWeb系列三: JavaScript学习上

web端 滚动条touch事件

07-06

滚动条touch事件是指在Web前端开发中，当用户使用触摸设备（如手机或平板）操作网页滚动条时触发的一些特定事件。主要涉及到以下几个关键事件： 1. `touchstart`: 当用户开始触控滚动条时，此事件会触发，通常用于记录初始触点的位置。 2. `touchmove`: 用户手指在滚动条上滑动时，这个事件频繁地触发，允许开发者获取当前滚动位置以及触点移动的距离。 3. `touchend` 或 `touchcancel`: 用户停止触控滚动条（可能是抬起手指或离开屏幕）时，这两个事件分别表示结束触控并释放压力，或者因某些原因触控中断。 4. `scroll`: 这是一个非触摸相关的事件，但在现代浏览器中，如果页面支持，它也可以在滚动条滚动时同步触发，无论通过鼠标还是触摸。处理滚动条touch事件，开发者通常会在JavaScript中捕获这些事件，并根据需要更新元素位置、内容显示或者执行其他交互效果。例如，可以实现平滑的滚动动画或者响应式导航栏的切换等。