AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2023-09-15 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>
兜里只有三分钱~
目录
相关文章
刻刻帝的海角
|
7月前
|
JavaScript
点击图片返回页面顶部的案例
点击图片返回页面顶部的案例
刻刻帝的海角
48 0
兜里只有三分钱~
uniapp轮播带查看大图效果demo示例、带数字的轮播（整理）
uniapp轮播带查看大图效果demo示例、带数字的轮播（整理）
兜里只有三分钱~
282 0
疯狂的猿
|
4月前
首页轮播点击展开详细说明html源码
首页轮播点击展开详细说明html源码,微信读书首页轮播源码，通过点击页面左右的箭头来切换不同的图片文字内容，图片为宽屏全屏的样式且有一个模糊的效果，文字的加载有一个时间顺序，有些类似于懒加载，整个页面是响应式的效果非常棒。
疯狂的猿
36 0
首页轮播点击展开详细说明html源码
朝阳39
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
朝阳39
172 0
兜里只有三分钱~
|
JavaScript
js限制文字字数--点击展开点击收起demo效果示例（整理）
js限制文字字数--点击展开点击收起demo效果示例（整理）
兜里只有三分钱~
113 0
兜里只有三分钱~
jQ侧边栏固定在顶部demo效果示例（整理）
jQ侧边栏固定在顶部demo效果示例（整理）
兜里只有三分钱~
40 0
兜里只有三分钱~
移动端整页滑屏示例（上下滑动整屏）demo效果示例（整理）
移动端整页滑屏示例（上下滑动整屏）demo效果示例（整理）
兜里只有三分钱~
72 0
兜里只有三分钱~
|
JavaScript
原生Js显示富文本效果demo（整理）
原生Js显示富文本效果demo（整理）
兜里只有三分钱~
251 0
兜里只有三分钱~
|
JavaScript
js点击收缩，点击展开demo效果示例（整理）
js点击收缩，点击展开demo效果示例（整理）
兜里只有三分钱~
102 0
兜里只有三分钱~
|
JavaScript
js鼠标可控的表格左右滑动demo效果示例（整理）
js鼠标可控的表格左右滑动demo效果示例（整理）
兜里只有三分钱~
61 0