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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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
解析argc argv在php中的应用
2013/06/24 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python selenium循环登陆网站的实现
2019/11/04 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
小松树教学反思
2014/02/11 职场文书
财务总监岗位职责
2015/02/03 职场文书
员工福利申请报告
2015/05/15 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
一文带你探究MySQL中的NULL
2021/11/11 MySQL