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与CSS复习(二)
Jun 29 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 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常用设计模式之委托设计模式
2016/02/13 PHP
脚本收藏iframe
2006/07/21 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
应届生幼儿园求职信
2013/11/12 职场文书
心理健康课教学反思
2014/02/13 职场文书
司法局火灾防控方案
2014/06/05 职场文书
物理学专业求职信
2014/07/04 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
教师工作表现自我评价
2015/03/05 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js