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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
JS图片预加载插件详解
Jun 21 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 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产生不重复随机数的5个方法总结
2014/11/12 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
纯js实现隔行变色效果
2017/11/29 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python实现简单的语音识别系统
2017/12/13 Python
Python while true实现爬虫定时任务
2020/06/08 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
.net开发工程师面试题
2014/02/25 面试题
现金出纳岗位职责
2014/03/15 职场文书
教师新年寄语
2014/04/03 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
师范生自荐信模板
2014/05/28 职场文书
大学专科求职信
2014/07/02 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
《观潮》教学反思
2016/02/17 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
详解Redis瘦身指南
2021/05/26 Redis