jq点击导航页面滑动到对应内容demo效果示例（整理）-阿里云开发者社区

jq点击导航页面滑动到对应内容demo效果示例（整理）

2023-09-15 32

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jq点击导航页面滑动到对应内容demo效果示例（整理）

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
        <title>jq点击导航页面滑动到对应内容</title>
        <style>
      * {
        margin: 0;
        padding: 0;
      }
      .div {
        position: fixed;
        top: 0;
        left: 500px;
      }
      ul {
        list-style: none;
      }
      ul li {
        width: 80px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        background: gray;
      }
      #hd1 {
        height: 100px;
        width: 100%;
      }
      #hd2 {
        height: 500px;
        width: 100%;
      }
      #hd3 {
        height: 800px;
        width: 100%;
      }
      #hd4 {
        height: 1000px;
        width: 100%;
      }
      #hd5 {
        height: 1500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
        <div class="div">
              <ul>
                    <li onclick="click_scroll()">导航1</li>
                    <li onclick="click_scroll2()">导航2</li>
                    <li onclick="click_scroll3()">导航3</li>
                    <li onclick="click_scroll4()">导航4</li>
                    <li onclick="click_scroll5()">导航5</li>
                </ul>
          </div>
        <div>
              <div id="hd1" class="section">
                    <div>内容一</div>
                </div>
              <div id="hd2" class="section">
                    <div>内容二</div>
                </div>
              <div id="hd3" class="section">
                    <div>内容三</div>
                </div>
              <div id="hd4" class="section">
                    <div>内容四</div>
                </div>
              <div id="hd5" class="section">
                    <div>内容五</div>
                </div>
          </div>
    <script type="text/javascript">
      //500 控制点击滚动条向下滑动的速度
      function click_scroll() {
        var scroll_offset = $("#hd1").offset().top;
        $("body,html").animate({
          scrollTop: scroll_offset
        }, 500);
      }
      function click_scroll2() {
        var scroll_offset = $("#hd2").offset().top;
        $("body,html").animate({
          scrollTop: scroll_offset
        }, 500);
      }
      function click_scroll3() {
        var scroll_offset = $("#hd3").offset().top;
        $("body,html").animate({
          scrollTop: scroll_offset
        }, 500);
      }
      function click_scroll4() {
        var scroll_offset = $("#hd4").offset().top;
        $("body,html").animate({
          scrollTop: scroll_offset
        }, 500);
      }
      function click_scroll5() {
        var scroll_offset = $("#hd5").offset().top;
        $("body,html").animate({
          scrollTop: scroll_offset
        }, 500);
      }
    </script>
  </body>
</html>

jq点击导航页面滑动到对应内容demo效果示例（整理）

热门文章

最新文章

相关电子书

相关实验场景