这篇文章主要介绍了如何通过js或jquery/跳转页面到指定位置,需要的朋友可以参考下

要解决两个需求:

一个是从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本来就是做动画用的,更多功能可以详细研究了。

最新资讯
滴滴启动国庆出行安全部署 程维:安全发展观是必修课

滴滴启动国庆出行安全

滴滴出行CEO、安委会主任程维在会上表示,今年是滴滴安
爱回收E+轮融资超1亿美元 二手行业难做全品类

爱回收E+轮融资超1亿

陈雪峰谈到并未做全品类的原因时认为,二手行业不存在全
中通宣布将香港上市发行价定为每股218港元 下周二挂牌

中通宣布将香港上市发

中通快递(NYSE:ZTO)今晚宣布,将香港二次上市的发行价定为
微信支付正计划加码存款市场 相关功能正处测试阶段

微信支付正计划加码存

9月22日消息,微信支付正计划加码存款市场。记者近期注
比亚迪据称商谈向戴姆勒供应电动汽车芯片

比亚迪据称商谈向戴姆

知情人士透露,沃伦·巴菲特支持的比亚迪正在与戴姆勒洽
强如BAT、TMD也难免栽跟头

强如BAT、TMD也难免栽

被视为中国互联网顶流的BAT、TMD,家家有本难念的经,发展
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,