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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
react-navigation之动态修改title的内容
Sep 26 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
javascript 有用的脚本函数
2009/05/07 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python中bisect的用法
2014/09/23 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python将string转换到float的实例方法
2019/07/29 Python
Django 重写用户模型的实现
2019/07/29 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Python 高效编程技巧分享
2020/09/10 Python
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
房屋改造计划书
2014/01/10 职场文书
仓库组长岗位职责
2014/01/29 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
就业证明函
2015/06/17 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
安全主题班会教案
2015/08/12 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python