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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
jQuery的position()方法详解
Jul 19 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 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发送与接收流文件的方法
2015/02/11 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python使用pymysql实现操作mysql
2016/09/13 Python
深入理解python中的atexit模块
2017/03/07 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python字符串循环左移
2019/03/08 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
10张动图学会python循环与递归问题
2021/02/06 Python
行政总监岗位职责
2013/12/05 职场文书
结婚典礼证婚词
2014/01/08 职场文书
工作交流会欢迎词
2014/01/12 职场文书
财务总经理岗位职责
2014/02/16 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
关爱留守儿童标语
2014/06/18 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
离婚民事起诉状
2015/08/03 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
Redis入门教程详解
2021/08/30 Redis
Java 关于String字符串原理上的问题
2022/04/07 Java/Android