JS回到顶部案例

87小太阳

于 2022-11-12 15:49:34 发布

阅读量149

点赞数

分类专栏： JS案例文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_53798158/article/details/127821252

版权

JS案例专栏收录该内容

19 篇文章 0 订阅

订阅专栏

需求

约定一个临界值 500px

当滚动条超过这个临界值按钮显示

默认回到顶部按钮是隐藏的

小于以后再隐藏

用户点击按钮回到顶部

滚动条的高度 top 为 0 就是回到顶部

给按钮一个点击效果

<!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;
    }

    body {
      width: 100%;
      height: 5000px;
    }

    .header {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #fff;
      background-color: skyblue;

      position: fixed;
      left: 0;
      top: -80px;

      transition: top .5s linear;
    }

    .goTop {
      width: 50px;
      height: 50px;
      font-size: 22px;
      line-height: 25px;
      border: 1px solid #333;
      position: fixed;
      right: 50px;
      bottom: 50px;
      cursor: pointer;
      background-color: orange;
      text-align: center;

      display: none;
    }
    </style>
</head>

<body>
    <div class="header">顶部通栏</div>
    <div class="goTop">回到顶部</div>

    <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>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>
        <li>51</li>
        <li>52</li>
        <li>53</li>
        <li>54</li>
        <li>55</li>
        <li>56</li>
        <li>57</li>
        <li>58</li>
        <li>59</li>
        <li>60</li>
        <li>61</li>
        <li>62</li>
        <li>63</li>
        <li>64</li>
        <li>65</li>
        <li>66</li>
        <li>67</li>
        <li>68</li>
        <li>69</li>
        <li>70</li>
        <li>71</li>
        <li>72</li>
        <li>73</li>
        <li>74</li>
        <li>75</li>
        <li>76</li>
        <li>77</li>
        <li>78</li>
        <li>79</li>
        <li>80</li>
        <li>81</li>
        <li>82</li>
        <li>83</li>
        <li>84</li>
        <li>85</li>
        <li>86</li>
        <li>87</li>
        <li>88</li>
        <li>89</li>
        <li>90</li>
        <li>91</li>
        <li>92</li>
        <li>93</li>
        <li>94</li>
        <li>95</li>
        <li>96</li>
        <li>97</li>
        <li>98</li>
        <li>99</li>
        <li>100</li>
    </ul>
    <script>
      // 需求  
      // 约定一个临界值  500px 
      // 当滚动条超过 这个临界值 按钮显示 
      // 默认 回到顶部 按钮是隐藏的 
      // 小于以后再隐藏 

      // 用户点击按钮 回到顶部  
      // 滚动条的高度 top 为 0 就是回到顶部  

      // 给按钮一个点击效果  

      //1. 获取元素 
      var headerEle = document.getElementsByClassName('header')[0];
      // getElementsByClassName 得到的是一个数组
      // 需要从数组中提出元素 
      // 加下标
      var goTopEle = document.querySelector('.goTop');

      // 回到顶部 效果实现 滚动条直滚动 
      window.onscroll = function () {

          var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;
          // console.log(scrolltop);
          if (scrolltop>=500) {
            goTopEle.style.display = 'block';
            headerEle.style.top = 0;
          }else{
            goTopEle.style.display = 'none';
            headerEle.style.top = '-80px';
          }


      }

      goTopEle.onclick = function(){
        window.scrollTo({top:0,behavior:'smooth'});
      }
    </script>



</body>

</html>