平滑滚动不适用于动画鼠标向下滚动按钮

Question

我在我的网页上新添加了一个动画鼠标向下滚动按钮。当我单击按钮时，平滑滚动不起作用。

注意：我已经为下一部分设置了一个单独的按钮，可以完美地平滑滚动！

动画鼠标滚动按钮activity.html：

<span class="scroll-btn"><a href="#about"><span class="mouse"><span></span></span></a><p>scroll me</p></span>

动画鼠标滚动按钮activity.css：

p {
  margin-left: -55px;
}
@-webkit-keyframes ani-mouse {
    0% {
    opacity: 1;
    top: 29%;
    }
    15% {
    opacity: 1;
    top: 50%;
    }
    50% {
    opacity: 0;
    top: 50%;
    }
    100% {
    opacity: 0;
    top: 29%;
    }
}
@-moz-keyframes ani-mouse {
    0% {
    opacity: 1;
    top: 29%;
    }
    15% {
    opacity: 1;
    top: 50%;
    }
    50% {
    opacity: 0;
    top: 50%;
    }
    100% {
    opacity: 0;
    top: 29%;
    }
}
@keyframes ani-mouse {
    0% {
    opacity: 1;
    top: 29%;
    }
    15% {
    opacity: 1;
    top: 50%;
    }
    50% {
    opacity: 0;
    top: 50%;
    }
    100% {
    opacity: 0;
    top: 29%;
    }
}
 .scroll-btn {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10%;
    text-align: center;
}
.scroll-btn > * {
    display: inline-block;
    line-height: 18px;
    font-size: 13px;
    font-weight: normal;
    color: #7f8c8d;
    color: #ffffff;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
    color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.scroll-btn .mouse {
    position: relative;
    display: block;
    width: 35px;
    height: 55px;
    margin: 0 auto 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid white;
    border-radius: 23px;
}
.scroll-btn .mouse > * {
    position: absolute;
    display: block;
    top: 29%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: white;
    border-radius: 50%;
    -webkit-animation: ani-mouse 2.5s linear infinite;
    -moz-animation: ani-mouse 2.5s linear infinite;
    animation: ani-mouse 2.5s linear infinite;`

下一节活动html：

<div class="txtanim1 next-section">
   <span><a href="#about">about me <strong><i class="fa fa-question-circle"</i> 
    </strong></a></span>
    </div>

平滑滚动活动JS：

         function smoothScrolling($links, $topGap) {
                var links = $links;
                var topGap = $topGap;

                links.on("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 - topGap
                            }, 1000, "easeInOutExpo");
                            return false;
                        }
                    }
                    return false;
                });
            }

Answer 1

尝试切换到 jQuery 脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



 $(document).ready(function(){
       // Add smooth scrolling to all links
       $("a").on('click', function(event) {

        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          // Store hash
          var hash = this.hash;

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function(){

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        } // End if
      });
    });