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;
      });
    });
  • 相关阅读:
    迷宫最短路问题
    回溯算法
    解题报告:poj1321 棋盘问题
    矩阵、分数、点、线类
    判断图像中有多少行文本(开发中)
    图形-回行扫描函数
    贝叶斯分类器
    js解析数学运算公式
    用postcss给less加上webkit前缀
    node创建文件夹
  • 原文地址:https://www.cnblogs.com/wangyongx/p/14668561.html
Copyright © 2011-2022 走看看