js,jquery滚动/跳转页面到指定位置的实现思路
要解决两个需求:
一个是从A页面跳到B页面,滚动到页面的任何地方;
第二个是在B页面内部点击某个元素,滚动到页面的任何地方;
怎么解决啊?很简单,当然是用锚点。
首先在A页面创建一个锚点
<body>
<ahref="b.html#pos"target="_blank">点击跳转</a>
<body>
然后在B页面定义这个锚点
<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<aname="pos">滚动到这里</a>
...
再加点文字
...
</body>
好,测试,OK!点过去之后是不是“滚动到这里”出现在了浏览器的最上方。
实际的情况经常是制作人员切好的页面,产品突然说要加个功能,需要滚动到某个地方,但是那个地方是个div,并没有a锚点,
创建一个锚点的话又会占据网页的空间,影响到网页的版式,这怎么办呢?我们创建一个隐藏的锚点试试,隐藏的锚点不占用空间。
继续:如果我让B页面里的<aname="pos">滚动到这里</a>不显示,就是设定display:none;那么还能滚动到这里吗?试试
<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<aname="pos"style="display:none;">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>
不妙,IE可以工作,火狐有点不给面子。
只能换一种思路,给锚点指定一个id能滚动到这里吗?试试
<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<aid="pos">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功!看来换成id是个好办法,现在把锚点换成div试试
<body>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<divid="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功!这样就解决了问题,不需要插入一个<a></a>锚点,只需要给div加一个id就行了。
接下来解决第二个需求,在B页面内部点击某个元素,滚动到指定位置。
首先,在B.html顶部创建一个锚点,指向要滚动的那个div
<body>
<ahref="#pos">点击这里本页跳转</a>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<divid="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功!那如果要点击一个button按钮滚动到指定位置呢?button按钮不能添加href,只能曲折解决。
先建立一个隐藏的锚点,然后点击button按钮的时候加一个onclick事件,然后通过js来调用锚点的click事件,曲线救国。
<body>
<scripttype="text/javascript">
functionclick_scroll(){
document.getElementById("anchor_scroll").click();
}
</script>
<inputtype="button"value="点击button跳转"onclick="click_scroll();"/>
<aid="anchor_scroll"href="#pos"style="display:none">点击这里本页跳转</a>
...
这里是很多文字,把页面撑开,撑出滚动条
...
<divid="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功!既然button能够成功,那其他的也就好办了,img,div都可以这么做。
还有一个方法通过jQuery的aminate动画方法也可以做,我贴出代码
<body>
<scripttype="text/javascript">
functionclick_scroll(){
varscroll_offset=$("#pos").offset();//得到pos这个div层的offset,包含两个值,top和left
$("body,html").animate({
scrollTop:scroll_offset.top//让body的scrollTop等于pos的top,就实现了滚动
},0);
}
</script>
<inputtype="button"value="点击button跳转"onclick="click_scroll();"/>...
这里是很多文字,把页面撑开,撑出滚动条
...
<divid="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功!这个方法有个好处,就是控制滚动的速度,上面的蓝色的0就是控制速度的,0是立即的意思,那设为1000试试,
可以看到是慢慢的滚动到了pos,如果设为5000呢,就会更慢了。
为什么会这样呢?因为jQuery的animate本来就是做动画用的,更多功能可以详细研究了。
相关文章
- html 转 js_js加载html字符串
- vue.js和jquery的区别_人和人类的区别是什么
- JavaScript、js文件、Node.js、静态文件
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- js jquery 页面加载初始化方法详解编程语言
- JS在Oracle中的应用(js如何oracle)
- 非常不错的弹出一个div的js代码
- Jquery操作Select简单方便一个js插件搞定
- js和jquery批量绑定事件传参数一(新猪猪原创)
- 结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
- js函数的副作用分析
- 解析jQuery与其它js(Prototype)库兼容共存
- jquery动态加载js三种方法实例
- jQuery快速上手:写jQuery与直接写JS的区别详细解析
- JS(JQuery)操作Array的相关方法介绍
- js获取当前地址JS获取当前URL的示例代码
- 原生JS绑定滑轮滚动事件兼容常见浏览器
- 在Linux上用forever实现Node.js项目自启动
- jquery和js实现对div的隐藏和显示方法