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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
javascript简易画板开发
Apr 12 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP中overload与override的区别
2017/02/13 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
django最快程序开发流程详解
2019/07/19 Python
用python实现一个简单的验证码
2020/12/09 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
小班重阳节活动方案
2014/02/08 职场文书
元旦促销方案
2014/03/15 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
给医院的感谢信
2015/01/21 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js