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 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
详解Layer弹出层样式
Aug 21 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
uni-app之APP和小程序微信授权方法
May 09 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/07 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
jquery原理以及学习技巧介绍
2015/11/11 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
koa源码中promise的解读
2018/11/13 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
Python 基础之字符串string详解及实例
2017/04/01 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
python request 模块详细介绍
2020/11/10 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
Java基础知识面试要点
2016/07/29 面试题
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
教师优秀党员事迹材料
2014/08/14 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2014年行政工作总结
2014/11/19 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB