js 跳转至指定位置

来源:互联网 发布:淘宝服务站加盟 编辑:程序博客网 时间:2024/06/14 09:36

方法一:给链接a加个#的方式来实现跳转。(锚点方法)

<div id="container">
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
</div>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>



  div {
     height: 800px;
     width: 400px;
     border: 2px solid black;
   }
#container{
     position: fixed;
     margin:50px 500px;
}


该锚点法,不需要任何的js代码,即可实现跳转的方法。缺点:点击链接url发生变化,刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用,对于.cshtml页面不起作用。



方法二:用js的srollIntoView方法进行使用

var tar=$("form").find(".Validform_wrong").eq(0).parent().parent();
tar[0].scrollIntoView(true);


方法三:用animate属性,当点击锚点后,页面滚动到相应的DIV。原理是修改页面的scrollTop

var tar=$("form").find(".Validform_wrong").eq(0).parent().parent();
$("html,body").animate({scrollTop:tar.offset().top-$("header").height()-tar.height()},500);

0 0
原创粉丝点击