注册

找回密码

账号  

密码  

<<返回列表下一个上一个收藏 打印本文 复制本文地址

474

查看

0

回复
主题：JavaScript点击回顶部，点击到页面最底部，点击到指定地方 [收藏主题]  
lan988 当前离线

288

主题

210

广播

31

粉丝
添加关注
级别:管理员
用户积分:182 分
登录次数:1101 次
注册时间:2007-3-30
最后登录:2024-11-27
lan988 发表于：2023-12-21 16:28:21   | 显示全部帖子 查看该作者主题 楼主 
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
 
    html,
    body {
      width: 100%;
      height: 100%;
    }
 
    ul {
      width: 100%;
      height: auto;
    }
 
    li {
      height: 35px;
      display: flex;
      align-items: center;
    }
  </style>
</head>
 
<body>
  <div class="box">
    <div class="goBottom">点击回到底部</div>
    <div class="cont">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li class="showLi">在这里显示</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
      </ul>
    </div>
    <div class="goTop">点击回到顶部</div>
    <div class="goShowView">到指定区域</div>
  </div>
</body>
<script>
  var goTop = document.querySelector('.goTop')
  var goBottom = document.querySelector('.goBottom')
  // 1.平滑回到页面最顶部
  goTop.addEventListener('click', function () {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  })
 
  // 2.平滑的到页面最底部
  goBottom.addEventListener('click', function () {
    console.log(document.documentElement.offsetHeight);
    window.scrollTo({
      top: document.documentElement.offsetHeight,
      left: 0,
      behavior: "smooth",
    });
  })
 
 
  // 3.将元素滚动到可见区域
  const goShowView = document.querySelector(".goShowView");
  const showLi = document.querySelector(".showLi");
  const smoothScroll = (element) => {
    element.scrollIntoView({
      behavior: "smooth",
    });
  };
  goShowView.addEventListener("click", () => {
    smoothScroll(showLi);
  });
 
</script>
 
</html>
 
分享到252
 
专业从事风水，命理，择日，取名等。
本站是提供个人知识管理的网络存储空间，所有非本站原创内容均由用户发布，不代表本站观点。如发现有害或侵权内容，请点击这里 举报
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
＜下一主题 | 上一主题 ＞
风水自学网有限公司 © 2016-2025 版权所有 页面执行0.17383秒 powered by KesionCMS 9.0