js,jquery滚动/跳转页面到指定位置的实现思路
发布时间:2024-04-10 16:19:54
要解决两个需求:
一个是从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本来就是做动画用的,更多功能可以详细研究了。
猜你喜欢
- 本文实例为大家分享了Python QQBot库的QQ聊天机器人的具体代码,供大家参考,具体内容如下项目地址:https://github.c
- 以下是个人对Python深浅拷贝的通俗解释,易于绕开复杂的Python数据结构存储来进行理解!高级语言中变量是对内存及其地址的抽象,Pyth
- reduce() 函数在 python 2 是内置函数, 从python 3 开始移到了 functools 模块。官方文档是这样介绍的re
- 如何自动反馈电子邮件?很多网站上的电子邮件都是自动回复的,就象163电子邮局提供的邮件自动回复功能一样。这是怎么实现的?我们可以用ASPMa
- 1.闭包的定义和使用当返回的内部函数使用了外部函数的变量就形成了闭包闭包可以对外部函数的变量进行保存,还可以提高代码的可重用性实现闭包的标准
- 如何在浏览器地址栏显示自己的Favicons小图标?显示效果如下列网站的图标:Google网易163上面两个网站都设置了自己的Favicon
- 今天一个朋友给个需求: 来来 {'isOK': 1, 'isRunning': None, 'isE
- 前言python画图,如果用英文显示基本没有问题,但是中文可能会有乱码或者不显示的情况。经过个人的测试,下图中“横轴&a
- 本文实例讲述了python文件读写操作与linux shell变量命令交互执行的方法。分享给大家供大家参考。具体如下:python对文件的读
- 让我们看看如何在 Python 中复制数组。 有 3 种复制数组的方法:只需使用赋值运算符。浅拷贝深拷贝1 使用赋值运算符我们可以使用赋值运
- 最近刚接触了公司的服务器,使用的是Windows 2003 server + IIS 6.0 服务器,在使用无组件上传文件时产生这个错误时:
- 背景在做deeplearning过程中,使用caffe的框架,一般使用matlab来处理图片(matlab处理图片相对简单,高效),用pyt
- 1.概述最近项目需要使用程序实现数学微积分,最初想用java实现,后来发现可用文档太少,实现比较麻烦,后来尝试使用python实现,代码量较
- 一、分类问题损失函数——交叉熵(crossentropy)交叉熵刻画了两个概率分布之间的距离,是分类问题中使用广泛的损失函数。给定两个概率分
- 举个例子:q=[0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15]我想获取其中值等于7的那个值的下标,以便于用于其
- 1、登录SMTP服务器首先使用网上的方法(这里使用163邮箱,smtp.163.com是smtp服务器地址,25为端口号):import s
- 今天我们用python+tkinter安装带界面的井字棋,效果如图所示。Tkinter 是 Python 的标准 GUI 库。Python
- 简介这篇博客涉及的脚本用来将bag文件批量转化为mp4文件dockerfileFROM osrf/ros:kinetic-desktop-f
- 数据库中有一字段type_code,有中文类型和中文类型编码,现在对type_code字段的数据进行统计处理,编码对应的字典如下:{'
- 询问度娘搭好appium和python环境,开启移动app自动化的探索(基于Android),首先来记录下如何启动待测的app吧!如何启动A