Question

我一直在努力在我的网站上创建一个平滑的滚动div ...我想要做的是创建一个链接，将我链接到网站的另一部分。它有效，但它只是把我送到那里，我想让它更顺畅..

这是我的代码：

HTML

<html>
<head>
    <title>I Am Martin</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div class="ask_box">
        <div class="question">I Am</div>

        <div class="box">
            <a href="#"><span class="answer1">Martin</span></a>
        </div>

        <div class="scroll_down">
            <a href="#try"><button class="btn_down"> &darr; </button></a>
        </div>
    </div>

    <div id="try">

    </div>

</body>

CSS

    *{ 
    margin: 0;
    padding: 0;
}

.ask_box{
    height: 100vh;
    background: #cd3f43;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 30px;
}

.question {
    font-weight: 400;
    font-family: sans-serif;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    -webkit-font-smoothing: antialiased;
}

.boxes{
    display: flex;
    justify-content:space-between;
}

.answer1 {
    border: 5px solid white;
    border-radius: 5px;
    color: #FFF;
    font-size: 2em;
    font-weight: 800;
    display: inline-block;
    margin-left: 5px;
    padding: 0.3 0.8;
    letter-spacing: 3px;
    font-family: sans-serif;
    outline: none;
    background-color: #cd3f43;
}

.scroll_down{
    position: absolute;
    bottom: 0; 
    left: 50%; 
    right: 0;
    justify-content: center;
    align-items: center;
}

.btn_down{
    height: 30px;
    font-size: 0.6em;
    font-weight: 800;
    font-family: sans-serif;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    -webkit-font-smoothing: antialiased;
    outline: none;
    background-color: #cd3f43;
    border: 0;
}

#try{
    height: 95vh;
    background: #292929;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
}

对不起，如果我的英语不完美......我希望你能理解！

谢谢

Answer 1

我使用了CSS-Tricks的代码段。将值1000毫秒更改为滚动时间要求。

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

  * {
    margin: 0;
    padding: 0;
  }
  .ask_box {
    height: 100vh;
    background: #cd3f43;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 30px;
  }
  .question {
    font-weight: 400;
    font-family: sans-serif;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    -webkit-font-smoothing: antialiased;
  }
  .boxes {
    display: flex;
    justify-content: space-between;
  }
  .answer1 {
    border: 5px solid white;
    border-radius: 5px;
    color: #FFF;
    font-size: 2em;
    font-weight: 800;
    display: inline-block;
    margin-left: 5px;
    padding: 0.3 0.8;
    letter-spacing: 3px;
    font-family: sans-serif;
    outline: none;
    background-color: #cd3f43;
  }
  .scroll_down {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    justify-content: center;
    align-items: center;
  }
  .btn_down {
    height: 30px;
    font-size: 0.6em;
    font-weight: 800;
    font-family: sans-serif;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    -webkit-font-smoothing: antialiased;
    outline: none;
    background-color: #cd3f43;
    border: 0;
  }
  #try {
    height: 95vh;
    background: #292929;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
  }

<html>

<head>
  <title>I Am Martin</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div class="ask_box">
    <div class="question">I Am</div>

    <div class="box">
      <a href="#"><span class="answer1">Martin</span></a>
    </div>

    <div class="scroll_down">
      <a href="#try">
        <button class="btn_down">&darr;</button>
      </a>
    </div>
  </div>

  <div id="try">

  </div>

</body>

平滑的滚动链接

1 个答案: