用JS将页面定位到某个位置(DIV)

使用Javascript自动将页面滚动到指定位置 
下面我们就来讲解一下如何使用Javascript自动将页面滚动到指定位置。 
指定需要滚动的位置 
这一步很简单,就是需要给滚动到指定位置的元素加上id属性,如下: 
天一广场 
使用Javascript自动将页面滚动到指定位置 
脚本如下: 

这就完成了我们的需求,经测试兼容所有主流浏览器。 
我也查阅了网上的一些资料,有的朋友说还有如下方式实现: 
我也对上面的方法进行了测试,发现使用javascript中的window.scrollBy()存在一个问题:每刷新一次页面,滚动距离顶部的高度都会比上次递增我们定义的scroll_y值。 
所以还是建议大家使用window.location.hash方法来自动将页面滚动到指定位置。 
<script type=”text/javascript”> $(function(){ window.location.hash = "#title"; }) </script> 
window.location 对象属性介绍: 
Location 对象属性 
属性          描述     IE F O 
hash 设置或返回从井号 (#) 开始的 URL(锚)。 4 1 9 
host 设置或返回主机名和当前 URL 的端口号。 4 1 9 
hostname 设置或返回当前 URL 的主机名。 4 1 9 
href 设置或返回完整的 URL。 4 1 9 
pathname 设置或返回当前 URL 的路径部分。 4 1 9 
port 设置或返回当前 URL 的端口号。 4 1 9 
protocol 设置或返回当前 URL 的协议。 4 1 9 
search 设置或返回从问号 (?) 开始的 URL(查询部分)。 4 1 9 

Location 对象方法 
属性 描述 IE F O 
assign() 加载新的文档。 4 1 9 
reload() 重新加载当前文档。 4 1 9 
replace() 用新的文档替换当前文档。 4 1 9 

History 对象 
History 对象包含用户(在浏览器窗口中)访问过的 URL。 
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。 
History 对象属性 
属性 描述 IE F O 
length 返回浏览器历史列表中的 URL 数量。 4 1 9 
History 对象方法 
方法 描述 IE F O 
back() 加载 history 列表中的前一个 URL。 4 1 9 
forward() 加载 history 列表中的下一个 URL。 4 1 9 
go() 加载 history 列表中的某个具体页面。 4 1 9 

History 对象描述 
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

时间: 2024-10-09 16:06:58

用JS将页面定位到某个位置(DIV)的相关文章

js获取页面窗口大小以及滚动条位置

function getPageScroll() {         var xScroll, yScroll;         if (self.pageYOffset) {             yScroll = self.pageYOffset;             xScroll = self.pageXOffset;         } else if (document.documentElement && document.documentElement.scroll

JS实现页面进入、返回定位到具体位置

其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了.例如,某些元素是在某种情况下才加上的,又或者多级定位. 目前,我知道的返回定位到具体位置有两种方法: ①利用id定位,在跳转的时候带上某个模块的id,返回的时候定位到该处. ②利用距离顶部的距离,在跳转的时候带上当前位置滚动过的距离,返回的时候定位到该处. 一般应用场景: 定位到某一个模块的时候,有二级定位的时候利用方法①. 定位到具体位置的时候,定位到某一个模块的时候,利用方

使用原生js的scrollTop,刷新进入页面定位到某一个dom元素

原生js的scrollTop即可,与jquery方法的区别是jquery做了兼容封装.我想要实现的功能是时间定位,根据当前时间定位到滚动区的时间位置.页面为移动端页面,上下固定位置,中部为1小时4格的选择区域,从0点到24点. 开始我想发出现了偏差,总想定位到某个dom,这样使得scrollTop一直是0,怎么设置都不行,后来仔细分析才发现要设置在超出当前可视区域的dom上才可以. 所以设置在外层overflow-x:scroll;的dom上即可,根据时间匹配dom位置,根据索引及每格的高度计算

跳转页面定位到指定的位置(转)

跳转页面定位到指定的位置 明天要回家了,今天也没啥事做.就分享下做过的一个小需求,还有很多朋友问过我类似的问题,当时也是跟他们说说简单的思路,并没有分享.今天我就整理下吧. 需求是这样的A页面有的链接,跳转到B页面中.并且要根据A页面的链接不同定位的不同的内容区域.我贴个图你大概就理解了: A页面 B页面 当我点击A页面中3的链接的时候,就要跳转到B页面,并且定位到活动三内容区域: 这个都是一个简单的活动页面,当然你也可以很简单的实现,把B页面拆分成3个页面,分别对应A页面的3个不容的内容,但是

scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s>=782) {//782是导航条离页面顶部的距离(px) $('.nav').addClass('fixednav'); } else{ $('.nav').removeClass('fixednav'); } });}); .fixednav{ position:fixed; top:0px; le

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g

js获得页面鼠标位置

1.客户区坐标位置:clientX,clientY 鼠标相对于在当前页面可视范围左上角的位置 2.页面坐标位置:pageX,pageY 鼠标相对于页面左上角的位置(受滑动等影响,例如pageY=clientY+scrollTop) 3.屏幕坐标位置:screenX,screenY 鼠标相对于电脑左上角的位置(无视浏览器位置) 4.偏移坐标位置:offsetX,offsetY 鼠标相对于当前对象左上角的位置(比如说你用canvas写一个画图板,就要用这个位置)

页面定位导航滚动插件

今天做页面定位导航时踩到一坑,由于页面顶部有一个fixed的导航条,所以用直接用锚点效果不好.所以打算用js来实现,顺便还有滚动的效果.昨晚做的时候想的是直接把tag设定为固定的值,但是睡觉前在平板上查看网页的时候发现,响应式布局,放到平板上top值就变了.所以今天起床又开始鼓捣这只小虫. 使用了jquery,然后滚动函数中使用jq来设定值,本来打算找到id后用 offset().top 加减一个差值就可以定位到我想要的位置.但是,在不同浏览器中obj.offset().top的值不一样,并且,

js获取页面的宽度

JS如何获取屏幕浏览器网页高度宽度网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:docume