`
nakupanda
  • 浏览: 414550 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一个使用方便的用于跳转后保持滚动条位置的JS

阅读更多
使用方法很简单,将这下面的代码存为一个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();
分享到:
评论

相关推荐

    【JavaScript源代码】vant list组件滚动保留滚动条位置.docx

    当从一个需要缓存的页面跳转时,我们获取当前页面(`from`)的滚动条位置,并将其保存到`from.meta.scrollTop`中。这样,当用户返回时,这个位置信息依然存在。 最后,在列表组件内部,我们可以利用组件的生命周期...

    js控制滚动条的位置

    本文将深入探讨如何使用JavaScript来精确控制网页的滚动条位置,包括基础语法、应用场景以及一些高级技巧。 ### 基础语法:控制滚动条位置 控制滚动条位置主要依赖于`document.documentElement.scrollTop`和`...

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

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

    elementUI滚动条,点击dom元素滚动到指定位置.pdf

    我们首先定义了一个 `setup` 函数,用于初始化滚动条的状态和事件处理函数。在这个函数中,我们定义了几个变量: * `ref_scrollbar`:用于存储滚动条组件的引用。 * `data`:用于存储滚动条的状态,包括当前滚动...

    HTML在页面上滚动滚轮滚动到指定的位置停.javascript_js跳转到页面指定位置

    本主题探讨如何在用户滚动滚轮时使页面在特定位置停止,并使用JavaScript进行平滑滚动到指定元素。 首先,HTML中的锚点(Anchor)可以用来创建页面内的链接,让用户点击后直接跳转到页面的某个部分。例如,可以在...

    【JavaScript源代码】JavaScript 获取滚动条位置并将页面滑动到锚点.docx

    ### JavaScript 获取滚动条位置并将页面滑动到锚点 #### 前言 在现代Web应用开发中,尤其是在移动端的应用场景下,用户交互体验尤为重要。其中一项常见的需求就是实现页面内的快速定位,即通常所说的“锚点”功能...

    js页面跳转方法

    这将打开一个新的浏览器窗口,并设置其高度为 500 像素、宽度为 611 像素、出现滚动条和状态栏。 window.open() 方法的参数详解 window.open() 方法的参数可以是以下之一或多个: * alwaysLowered:指定窗口隐藏...

    js页面跳转代码汇总

    这段代码首先弹出一个空白警告框,然后使用`window.history.back(-1)`方法使浏览器返回至上一个页面。`window.history`对象提供了对历史列表的访问,而`back()`方法则允许用户导航回历史记录中的前一个位置。通常...

    js代码的滚动广告条

    在本案例中,我们关注的是"js代码的滚动广告条",这是一个常见的网页设计元素,用于吸引用户的注意力并展示重要的促销信息或通知。 滚动广告条通常是利用JavaScript来实现的一种动态效果,它可以在页面的一侧或顶部...

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

    本文主要探讨了在HTML页面中,如果存在一个具有滚动条的div元素,如何通过JavaScript记录并恢复滚动条位置。以下将详细介绍两种实现这一功能的方案。 第一种方案通过Cookie来保存滚动条的垂直滚动位置(scrollTop)...

    保持之前的ScrollBar位置_小例

    在这个名为"小例"的项目中,可能包含的文件如`index.jsp`可能是主入口页面,`include.jsp`可能是一些通用组件或者头部、尾部的包含文件,而`showPage.jsp`可能用于显示具体内容,并在其中处理滚动条位置的逻辑。...

    jQuery 锚点跳转滚动条平滑滚动一句话代码

    首先,标题提到的"jQuery锚点跳转滚动条平滑滚动一句话代码"是一个常见的需求,它允许用户点击链接后页面平滑地滚动到指定位置。这个功能可以通过以下代码实现: ```javascript $("html,body").animate({scrollTop:...

    js,jquery滚动/跳转页面到指定位置的实现思路

    在JavaScript和jQuery中,实现页面滚动到指定位置的需求可以通过多种方式来解决。本文将详细介绍如何使用锚点、隐藏锚点、ID以及jQuery的animate方法来完成这一任务。 首先,我们来回顾一下基本的锚点机制。锚点是...

    滚动条平滑滚动置顶&贴壁滚动层

    例如,一个侧边栏可以设计成在用户滚动到一定位置后,始终保持在屏幕的一侧,直到用户滚动回原来的位置。这可以通过设置CSS的`position: sticky`和`top`、`bottom`、`left`或`right`属性来实现。 标签“源码”提示...

    jquery网站滚动条整屏滑动切换.zip

    【jQuery网站滚动条整屏滑动切换】是一个利用JavaScript库jQuery实现的网页滚动效果,它允许用户自定义滚动条的样式,为网站带来更个性化、更美观的视觉体验。这个功能通常用于创建现代、动态的单页面应用或者设计感...

    通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位

    当我们将一个值赋给`scrollTop()`时,div元素的滚动条会立即跳转到指定的位置。 另一个重要的方法是`offset()`,它返回一个元素相对于文档的偏移(即位置)。`offset().top`属性表示元素顶部到文档顶部的距离。这个...

    滚动条控件的样式

    例如,在JavaScript中,可以使用`addEventListener`监听`scroll`事件,然后根据滚动条的位置更新内容的显示。对于自动滚动,可以设置定时器以实现持续滚动,或者使用CSS的`scroll-snap`属性来实现平滑滚动效果。 在...

    高质量自定义滚动条特效代码.zip

    在这里,jQuery 可能被用来实现滚动条的动态响应,例如监听滚动事件、改变滚动条位置以及创建平滑滚动效果。 JavaScript 是网页动态功能的核心,它可以实时更新页面内容,提供交互性。在这个案例中,JavaScript ...

    JavaScript 无缝上下滚动加定高停顿效果

    本段代码展示了一个利用JavaScript实现的无缝上下滚动效果,同时在达到特定高度时会暂停一段时间。这种效果常见于网站中的滚动广告条或者新闻滚动区域等场景,能够有效吸引用户的注意力,提高用户体验。 ### 二、...

    不随滚动条滚动的模式窗口

    在网页设计和开发中,"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术,它允许用户在当前页面上打开一个全屏或半屏的弹出窗口,而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...

Global site tag (gtag.js) - Google Analytics