php 网页滚动到指定位置,JavaScript_js,jquery滚动/跳转页面到指定位置的实现思路,要解决两个需求: 一个是从A - phpStudy...

js,jquery滚动/跳转页面到指定位置的实现思路

要解决两个需求:

一个是从A页面跳到B页面,滚动到页面的任何地方;

第二个是在B页面内部点击某个元素,滚动到页面的任何地方;

怎么解决啊?很简单,当然是用锚点。

首先在A页面创建一个锚点

点击跳转

然后在B页面定义这个锚点

...

这里是很多文字,把页面撑开,撑出滚动条

...

滚动到这里

...

再加点文字

...

好,测试,OK!点过去之后是不是“滚动到这里”出现在了浏览器的最上方。

实际的情况经常是制作人员切好的页面,产品突然说要加个功能,需要滚动到某个地方,但是那个地方是个div,并没有a锚点,

创建一个锚点的话又会占据网页的空间,影响到网页的版式,这怎么办呢?我们创建一个隐藏的锚点试试,隐藏的锚点不占用空间。

继续:如果我让B页面里的 滚动到这里 不显示,就是设定display:none; 那么还能滚动到这里吗? 试试

...

这里是很多文字,把页面撑开,撑出滚动条

...

滚动到这里

隐藏之后滚动到这里

...

再加点文字

...

不妙,IE可以工作,火狐有点不给面子。

只能换一种思路,给锚点指定一个id能滚动到这里吗? 试试

...

这里是很多文字,把页面撑开,撑出滚动条

...

滚动到这里

隐藏之后滚动到这里

...

再加点文字

...

OK,成功!看来换成id是个好办法,现在把锚点换成div试试

...

这里是很多文字,把页面撑开,撑出滚动条

...

滚动到这里

隐藏之后滚动到这里

...

再加点文字

...

OK,成功! 这样就解决了问题,不需要插入一个锚点,只需要给div加一个id就行了。

接下来解决第二个需求,在B页面内部点击某个元素,滚动到指定位置。

首先,在B.html顶部创建一个锚点,指向要滚动的那个div

点击这里本页跳转

...

这里是很多文字,把页面撑开,撑出滚动条

...

滚动到这里

隐藏之后滚动到这里

...

再加点文字

...

OK,成功!那如果要点击一个button按钮滚动到指定位置呢? button按钮不能添加href, 只能曲折解决。

先建立一个隐藏的锚点,然后点击button按钮的时候加一个onclick事件,然后通过js来调用锚点的click事件,曲线救国。

function click_scroll() {

document.getElementById("anchor_scroll").click();

}

点击这里本页跳转

...

这里是很多文字,把页面撑开,撑出滚动条

...

滚动到这里

隐藏之后滚动到这里

...

再加点文字

...

OK,成功!既然button能够成功,那其他的也就好办了,img,div都可以这么做。

还有一个方法通过jQuery的aminate动画方法也可以做,我贴出代码

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);

}

...

这里是很多文字,把页面撑开,撑出滚动条

...

滚动到这里

隐藏之后滚动到这里

...

再加点文字

...

OK,成功!这个方法有个好处,就是控制滚动的速度,上面的蓝色的0就是控制速度的,0是立即的意思,那设为1000试试,

可以看到是慢慢的滚动到了pos,如果设为5000呢,就会更慢了。

为什么会这样呢?因为jQuery的animate本来就是做动画用的,更多功能可以详细研究了。相关阅读:

HTML5 Canvas绘制圆点虚线实例

win7怎么升级到win10?win7升级win10教程

深入phpMyAdmin的安装与配置的详细步骤

JS实现漂亮的时间选择框效果

苹果OS X Yosemite 中怎么使用Markup功能?

css中float:right右对齐元素会换行不在同一条线上

C字符串操作函数实现方法小结

js实现键盘Enter键提交表单的方法

Ubuntu系统选择中文安装后日期显示乱码问题的解决方法

Nodejs Stream 数据流使用手册

PHP打开和关闭文件操作函数总结

JavaScript实现点击文字切换登录窗口的方法

Oracle数据表中的死锁情况解决方法

Android应用中使用TabHost组件继承TabActivity的布局方法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值