zoukankan      html  css  js  c++  java
  • 点击跳转到页面指定位置

    用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;
      });
    });
  • 相关阅读:
    安卓AlertDialog的使用
    蚂蚁的腿
    年龄排序
    Digital Roots
    小明的存钱计划
    不高兴的小明
    管闲事的小明
    小明的调查作业
    爱摘苹果的小明
    小明的难题
  • 原文地址:https://www.cnblogs.com/wangyongx/p/14520031.html
Copyright © 2011-2022 走看看