`
娄宗超
  • 浏览: 70658 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

阅读更多
昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决。殊不知今天在做PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息(也就是自动定位到了楼盘的相关信息,忽略了顶部banner)。如下图所示:

使用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() 方法。
分享到:
评论

相关推荐

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的...

    Javascript实现页面滚动时导航智能定位

    常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。 假设结构如下: &lt;div class=container&gt; ...

    使用div+css开发个人网站毕业设计.doc

    使用div+css开发个人网站毕业设计 目 录 前 言 1 第一章 网站开发背景 2 第一节 web概述 2 一、认识WEB 2 二、认识WEB2.0标准 2 第二章 DIV+CSS详解 5 第一节 DIV+CSS简介 5 第二节 级联样式表简介 6 第三节 DIV+CSS...

    JavaScript Table行定位效果

    定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed定位。 【克隆tr】 table有一个rows集合,包括了table的所有tr(包括thead和tfoot里面的)。 程序的Clone方法会根据其参数克隆对应索引的tr: this._...

    js正则表达式使用

    例如通过表达式定位DOM中的一个对象或一系列对象,一个例子就是定位id属性中含有某个特殊字符的div对象。 3)纯编程逻辑。直接用于编程的逻辑之中。 3,说明:本部分所举的正则表达式的代码片断,都是经过测试的,但...

    Javascript经典正则表达式

    例如通过表达式定位DOM中的一个对象或一系列对象,一个例子就是定位id属性中含有某个特殊字符的div对象。 3)纯编程逻辑。直接用于编程的逻辑之中。 3,说明:本部分所举的正则表达式的代码片断,都是经过测试的,但...

    JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

    本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法。分享给大家供大家参考,具体如下: 这里演示js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件的功能: ...

    高亮闪烁某个元素的js脚本

    页面上有些重要内容需要提醒客户,可采用的方法有很多。提醒用户关注某一区域(div),可以给该div加上边框闪烁的效果,达到吸引用户眼球的效果。 .box {border:1px solid #ccc; height:100px; width:600px; text-...

    超实用的jQuery代码段

    1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 ...

    jQuery详细教程

    如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的...

    html入门到放弃笔记

    标记在使用时,用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:&lt;标记&gt;内容标记&gt; Demo : 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 ...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...

    华西网源码

    如果你有部分使用不到的话,请将他的ID设置为你没有的使用的ID,或者删除相关代码,防止干涉 5)新曾频道部分使用特别说明:我以美食频道为说明: 打开相应的频道模板:portal/list_food.htm 在最后面找到 !--...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例127 将数组中指定索引位置的元素替换 157 实例128 获取数组中最后一个元素 158 实例129 去除数组中的重复元素 158 实例130 字符串与数组的转换 159 实例131 对数组元素进行随机排序 160 实例132 随机抽取数组中...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例127 将数组中指定索引位置的元素替换 157 实例128 获取数组中最后一个元素 158 实例129 去除数组中的重复元素 158 实例130 字符串与数组的转换 159 实例131 对数组元素进行随机排序 160 实例132 随机抽取数组中...

    齐博分类信息V1.5带黄页商业破解版 多城市仿58同城

    可以准确的识别访客的IP来源地,然后精确的定位指向到该访客所在城市的页面,这无论对于信息的调用显示还是对商家广告的指定地域展示,都是非常有意义的。 强大的自定义模型自定义字段功能 可以自由增加不同的...

    PHP开发实战1200例源码

    实例127 将数组中指定索引位置的元素替换 157 实例128 获取数组中最后一个元素 158 实例129 去除数组中的重复元素 158 实例130 字符串与数组的转换 159 实例131 对数组元素进行随机排序 160 实例132 随机抽取数组中...

Global site tag (gtag.js) - Google Analytics