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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
vue mint-ui tabbar变组件使用
May 04 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
Vue.js自定义指令学习使用详解
Oct 19 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 文件缓存的性能测试
2010/04/25 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
学习vue.js计算属性
2016/12/03 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
竞选班长演讲稿400字
2014/08/22 职场文书
民主生活会主持词
2015/07/01 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android