使用方法很简单,将这下面的代码存为一个ScrollHolder.js文件,然后在网页Head中加入:
<script language="javascript" src="ScrollHolder.js"></script>
代码:
/*
* 这个脚本用于保持页面跳转前后滚动条的位置一致
* bnc.badboy
* 2009-8-24
*/
function ScrollHolder()
{
//add event to window
this.addWindowListener = function(sEventType, fnHandler) {
if (window.addEventListener) {
window.addEventListener(sEventType, fnHandler, false);
} else if (window.attachEvent) {
window.attachEvent("on" + sEventType, fnHandler);
} else {
window["on" + sEventType] = fnHandler;
}
}
//remember scrolling information when window is unloading
this.whenUnload = function()
{
var scrollTop = document.documentElement.scrollTop;
document.cookie = "scrollTop="+scrollTop;
}
//set current scroll bar the last page scroll bar position
this.whenLoad = function()
{
var scrollTop = document.cookie.match(new RegExp("(^| )scrollTop=([^;]*)(;|$)"));
if(scrollTop==null)
scrollTop = 0;
window.scrollTo(0,scrollTop[2]);
}
//run this script
this.run = function()
{
this.addWindowListener("unload", this.whenUnload);
this.addWindowListener("load", this.whenLoad);
}
}
var scrollHolder = new ScrollHolder();
scrollHolder.run();
分享到:
相关推荐
当从一个需要缓存的页面跳转时,我们获取当前页面(`from`)的滚动条位置,并将其保存到`from.meta.scrollTop`中。这样,当用户返回时,这个位置信息依然存在。 最后,在列表组件内部,我们可以利用组件的生命周期...
本文将深入探讨如何使用JavaScript来精确控制网页的滚动条位置,包括基础语法、应用场景以及一些高级技巧。 ### 基础语法:控制滚动条位置 控制滚动条位置主要依赖于`document.documentElement.scrollTop`和`...
而滚动条位置的问题则关系到用户体验的连贯性,确保用户在离开页面后再次返回时,能够直接回到之前查看的位置,这是现代Web应用优化的重要部分。 1. **H5页面返回**:在H5页面间进行导航时,用户可能会通过浏览器的...
我们首先定义了一个 `setup` 函数,用于初始化滚动条的状态和事件处理函数。在这个函数中,我们定义了几个变量: * `ref_scrollbar`:用于存储滚动条组件的引用。 * `data`:用于存储滚动条的状态,包括当前滚动...
本主题探讨如何在用户滚动滚轮时使页面在特定位置停止,并使用JavaScript进行平滑滚动到指定元素。 首先,HTML中的锚点(Anchor)可以用来创建页面内的链接,让用户点击后直接跳转到页面的某个部分。例如,可以在...
### JavaScript 获取滚动条位置并将页面滑动到锚点 #### 前言 在现代Web应用开发中,尤其是在移动端的应用场景下,用户交互体验尤为重要。其中一项常见的需求就是实现页面内的快速定位,即通常所说的“锚点”功能...
这将打开一个新的浏览器窗口,并设置其高度为 500 像素、宽度为 611 像素、出现滚动条和状态栏。 window.open() 方法的参数详解 window.open() 方法的参数可以是以下之一或多个: * alwaysLowered:指定窗口隐藏...
这段代码首先弹出一个空白警告框,然后使用`window.history.back(-1)`方法使浏览器返回至上一个页面。`window.history`对象提供了对历史列表的访问,而`back()`方法则允许用户导航回历史记录中的前一个位置。通常...
在本案例中,我们关注的是"js代码的滚动广告条",这是一个常见的网页设计元素,用于吸引用户的注意力并展示重要的促销信息或通知。 滚动广告条通常是利用JavaScript来实现的一种动态效果,它可以在页面的一侧或顶部...
本文主要探讨了在HTML页面中,如果存在一个具有滚动条的div元素,如何通过JavaScript记录并恢复滚动条位置。以下将详细介绍两种实现这一功能的方案。 第一种方案通过Cookie来保存滚动条的垂直滚动位置(scrollTop)...
在 Vue 2.0 项目中,路由切换后页面滚动位置不变是一个常见的问题。这是因为 Vue 的路由机制会将页面滚动到顶部,而不是保持之前的滚动位置。下面我们将讨论这个问题的解决方法。 问题描述 在 Vue 项目中,使用...
在这个名为"小例"的项目中,可能包含的文件如`index.jsp`可能是主入口页面,`include.jsp`可能是一些通用组件或者头部、尾部的包含文件,而`showPage.jsp`可能用于显示具体内容,并在其中处理滚动条位置的逻辑。...
首先,标题提到的"jQuery锚点跳转滚动条平滑滚动一句话代码"是一个常见的需求,它允许用户点击链接后页面平滑地滚动到指定位置。这个功能可以通过以下代码实现: ```javascript $("html,body").animate({scrollTop:...
在JavaScript和jQuery中,实现页面滚动到指定位置的需求可以通过多种方式来解决。本文将详细介绍如何使用锚点、隐藏锚点、ID以及jQuery的animate方法来完成这一任务。 首先,我们来回顾一下基本的锚点机制。锚点是...
例如,一个侧边栏可以设计成在用户滚动到一定位置后,始终保持在屏幕的一侧,直到用户滚动回原来的位置。这可以通过设置CSS的`position: sticky`和`top`、`bottom`、`left`或`right`属性来实现。 标签“源码”提示...
【jQuery网站滚动条整屏滑动切换】是一个利用JavaScript库jQuery实现的网页滚动效果,它允许用户自定义滚动条的样式,为网站带来更个性化、更美观的视觉体验。这个功能通常用于创建现代、动态的单页面应用或者设计感...
例如,在JavaScript中,可以使用`addEventListener`监听`scroll`事件,然后根据滚动条的位置更新内容的显示。对于自动滚动,可以设置定时器以实现持续滚动,或者使用CSS的`scroll-snap`属性来实现平滑滚动效果。 在...
在这里,jQuery 可能被用来实现滚动条的动态响应,例如监听滚动事件、改变滚动条位置以及创建平滑滚动效果。 JavaScript 是网页动态功能的核心,它可以实时更新页面内容,提供交互性。在这个案例中,JavaScript ...
当我们将一个值赋给`scrollTop()`时,div元素的滚动条会立即跳转到指定的位置。 另一个重要的方法是`offset()`,它返回一个元素相对于文档的偏移(即位置)。`offset().top`属性表示元素顶部到文档顶部的距离。这个...
本段代码展示了一个利用JavaScript实现的无缝上下滚动效果,同时在达到特定高度时会暂停一段时间。这种效果常见于网站中的滚动广告条或者新闻滚动区域等场景,能够有效吸引用户的注意力,提高用户体验。 ### 二、...