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中JSON.parse的影响概述
Jul 17 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jquery replace方法去空格
May 08 jQuery
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
JavaScript实现点击切换功能
2021/01/27 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
理解Python中的类与实例
2015/04/27 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
大学毕业感言一句话
2014/02/06 职场文书
入股协议书
2014/04/14 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
安全生产月宣传标语
2014/10/06 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
用Python生成会跳舞的美女
2022/01/18 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers