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

赞 (0)

相关推荐

  • jquery easyui滚动条部分设置介绍

    在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(docume

  • jQuery scroll事件实现监控滚动条分页示例

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位

  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • jQuery创建平滑的页面滚动(顶部或底部)

    在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery.让您可以滚动到你的网页的顶部或底部 它是如何工作的 首先,加载jquery库在</ head>标签结束前: 复制代码 代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script>jQuery滚动到底部: 链接

  • 六款帮助你实现惊艳视差滚动效果的jQuery插件

    六款帮助你实现惊艳视差滚动效果的jQuery插件

    在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网页案例: 视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向

  • jQuery实现广告条滚动效果

    本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{padding: 0px;margin: 0px;} #list{width: 150px;height: 310px;margin: 0px auto;bor

  • jquery无缝向上滚动实现代码

    JS部份 复制代码 代码如下: $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollNews( $this ); }, 2000 ); }).trigger("mouseout"); });

  • jquery实现简单的无缝滚动

    jquery实现简单的无缝滚动 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> </

随机推荐