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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 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中读取照片exif信息的方法
2014/08/20 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
介绍一下如何优化MySql
2016/12/20 面试题
环境工程专业个人求职信
2013/12/05 职场文书
校长就职演讲稿
2014/01/06 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
工作证明格式及范本
2014/09/12 职场文书
赤壁观后感(2)
2015/06/15 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
检讨书范文
2019/04/16 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
SQLServer常见数学函数梳理总结
2022/08/05 MySQL