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实现点击栏目背景色改变
Dec 10 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 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/09/01 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
vant时间控件使用方法详解
2020/12/24 Javascript
python实现上传下载文件功能
2020/11/19 Python
使用Python来开发微信功能
2018/06/13 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
黄金搭档广告词
2014/03/21 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
超市收银员岗位职责
2015/04/07 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js