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


Posted in Javascript onJune 03, 2014

要解决两个需求:

一个是从A页面跳到B页面,滚动到页面的任何地方;
第二个是在B页面内部点击某个元素,滚动到页面的任何地方;

怎么解决啊?很简单,当然是用锚点。

首先在A页面创建一个锚点

<body>
<a href="b.html#pos" target="_blank">点击跳转</a>
<body>

然后在B页面定义这个锚点

<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<a name="pos">滚动到这里</a>
...
再加点文字
...
</body>

好,测试,OK!点过去之后是不是“滚动到这里”出现在了浏览器的最上方。
实际的情况经常是制作人员切好的页面,产品突然说要加个功能,需要滚动到某个地方,但是那个地方是个div,并没有a锚点,
创建一个锚点的话又会占据网页的空间,影响到网页的版式,这怎么办呢?我们创建一个隐藏的锚点试试,隐藏的锚点不占用空间。

继续:如果我让B页面里的 <a name="pos">滚动到这里</a> 不显示,就是设定display:none; 那么还能滚动到这里吗? 试试

<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<a name="pos" style="display:none;">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>

不妙,IE可以工作,火狐有点不给面子。
只能换一种思路,给锚点指定一个id能滚动到这里吗? 试试

<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<a id="pos">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功!看来换成id是个好办法,现在把锚点换成div试试

<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功! 这样就解决了问题,不需要插入一个<a></a>锚点,只需要给div加一个id就行了。

接下来解决第二个需求,在B页面内部点击某个元素,滚动到指定位置。
首先,在B.html顶部创建一个锚点,指向要滚动的那个div

<body>
<a href="#pos">点击这里本页跳转</a>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功!那如果要点击一个button按钮滚动到指定位置呢? button按钮不能添加href, 只能曲折解决。
先建立一个隐藏的锚点,然后点击button按钮的时候加一个onclick事件,然后通过js来调用锚点的click事件,曲线救国。

<body>
<script type="text/javascript">
function click_scroll() {
document.getElementById("anchor_scroll").click();
}
</script>
<input type="button" value="点击button跳转" onclick="click_scroll();" />
<a id="anchor_scroll" href="#pos" style="display:none">点击这里本页跳转</a>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功!既然button能够成功,那其他的也就好办了,img,div都可以这么做。

还有一个方法通过jQuery的aminate动画方法也可以做,我贴出代码

<body>
<script type="text/javascript">
function click_scroll() {
var scroll_offset = $("#pos").offset(); //得到pos这个div层的offset,包含两个值,top和left
$("body,html").animate({
scrollTop:scroll_offset.top //让body的scrollTop等于pos的top,就实现了滚动
},0);
}
</script>
<input type="button" value="点击button跳转" onclick="click_scroll();" />...
这里是很多文字,把页面撑开,撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>

OK,成功!这个方法有个好处,就是控制滚动的速度,上面的蓝色的0就是控制速度的,0是立即的意思,那设为1000试试,
可以看到是慢慢的滚动到了pos,如果设为5000呢,就会更慢了。
为什么会这样呢?因为jQuery的animate本来就是做动画用的,更多功能可以详细研究了。

Javascript 相关文章推荐
jquery foreach使用示例
Sep 12 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 #Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 #Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 #Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 #Javascript
node.js实现多图片上传实例
Jun 03 #Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 #Javascript
jquery处理json数据实例分析
Jun 03 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP 代码规范小结
2012/03/08 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
Python常用模块用法分析
2014/09/08 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python实现横向拼接图片
2020/03/23 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
大学生毕业自我鉴定范文
2014/02/03 职场文书
项目总经理岗位职责
2014/02/14 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
班级年度安全计划书
2014/05/01 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
设备管理实施方案
2014/05/31 职场文书
支部鉴定材料
2014/06/02 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
党组织结对共建协议书
2016/03/23 职场文书