zoukankan      html  css  js  c++  java
  • JS点击跳到指定div的位置

    1.给链接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>

    2.用animate属性,当点击锚点后,页面滚动到相应的DIV

    <div id="container">
         <p id="p1">div1</p>
         <p id="p2">div2</p>
         <p id="p3">div3</p>
    </div>
      <div id="div1">div1</div>
      <div id="div2">div2</div>
      <div id="div3">div3</div>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    $(document).ready(function() {
      $("#p1").click(function() {
        $("html, body").animate({
          scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
        return false;
      });
      $("#p2").click(function() {
        $("html, body").animate({
          scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
        return false;
      });
      $("#p3").click(function() {
        $("html, body").animate({
          scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
        return false;
      });
    });
  • 相关阅读:
    list集合对象日期排序
    Mongodb模糊,or,and查询和日期查询
    单例模式
    代理模式
    抽象工厂模式
    java 除数运算获取两位小数
    html5 canvas 使用总结
    @MockBean 注解后 bean成员对象为 null?
    Java8 BiFunction 简单用用
    如何正确安装Ubuntu
  • 原文地址:https://www.cnblogs.com/wangyongx/p/14668561.html
Copyright © 2011-2022 走看看