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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
js中url对象化管理分析
Dec 29 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
prototype class详解
2006/09/07 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
javascript定时器完整实例
2015/02/10 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
浅析Python基础-流程控制
2016/03/18 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python 实现UTC时间加减的方法
2018/12/31 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
管理标语大全
2014/06/24 职场文书
补充协议书
2015/01/28 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
详解Flask开发技巧之异常处理
2021/06/15 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
TypeScript 内置高级类型编程示例
2022/09/23 Javascript