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>

时间: 2024-10-14 22:16:54

js,jquery滚动/跳转页面到指定位置的相关文章

如何跳转到另一个页面的指定位置

如何跳转到另一个页面的指定位置:在同一个页面中,点击一个地方跳转到指定的位置这个很简单,就是使用的锚点,例如: <a href="#thediv">蚂蚁部落</a> 以上代码,当点击a元素的时候能够跳转到id属性值为thediv的元素.上面介绍的是在同一个页面的情况,如果是不同的页面当然也是可以进行这样的定位的,只要在前面加上链接即可: <a href="mytest.aspx#thediv">蚂蚁部落</a> 以上代

js在一定时间内跳转页面及各种页面刷新

1.js 代码: <SCRIPT LANGUAGE="JavaScript"> var time = 5; //时间,秒 var timelong = 0; function diplaytime(){ //时间递减 document.all.his.innerHTML = time -timelong ; timelong ++; } function redirect(){ //跳转页 //history.back(); window.location.href=&qu

基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码

比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js 复制代码代码如下: //根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var para

使用jQuery加载html页面到指定的div

一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div> 用jquery ajax 可以实现假设 a.html 和b.html在同一目录 b.html 1 <script > 2 $

Jquery 实现点击一个页面跳转后在另外一个页面显示指定位置

<script> $(function(){ var isTarget = '<?php echo $_GET['target']; ?>'; if (isTarget != "") { var body = $('body') var target = $('#content'); // 要显示的位置标签id body.animate({ scrollTop:target.offset().top - body.offset().top + body.scro

JS/jquery实现鼠标控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. mouseout和mouseleave 这里需要特别注意mouseout与mouseleave的区别.我们通过下面代码示例来看一下: <p style="color:#333333;font-family:-apple-system, " font-size:16px;&qu

在浏览器中使用jquery取得iframe中页面中指定元素的值的不同

自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(window.frames["yourframename"].document).find("#yourelementid")的形式,这个是在调试页面的时候在ie和chrome的开发者工具试过的. 2. 在ascx页面写的时候,和ascx的包含页面(iframe包含的是ascx

Vue系列:滚动页面到指定位置实现

方法1:scrollTop 滚动到某位置 方法2:scrollTo,scrollBy,scroll滚动到某位置 方法3:scrollIntoView() 实现滚动到具体某元素 需注意,上述3种方法都不是平滑滚动 原文地址:https://www.cnblogs.com/One-sprite/p/10083899.html

js实现div滚动条在页面刷新 滚动条位置固定

思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTop js代码实现: function KeepScrollBar() { var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof