Question

我正在尝试让我的导航按钮在点击时根据需要滚动到页面的某些部分。我怎么能这样做？

.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.profile-id {
  position: center;
}

form {
  display: inline;
}

<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'>

<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<header>
  <p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p>
</header>

<style>
  body {
    margin: 0;
    padding: 0;
    position: absolute;
    font-family: 'Bungee Inline';
    background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png);
    background-repeat: no-repeat;
    background-position: center top, 100% 300px, 0% 870px;
    background-size: 100% 380px, 40%, 42%;
  }
</style>

<p style="margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS set up shop in sunny So-Flo. The company was set up with the intention of coding an array of projects to prepare a strong, diverse portfolio for it's founder: Armando F III. With the knowledge from the FreeCodeCamp curriculum and a degree in software
  development, Armando hopes to build NWDS and make a breakout appearence in the software scene.
  <br></br>
  @JadeCoder
</p>

<p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> You can contact Armando through his freelance portfolio on Upwork by clicking
  <a href="https://www.upwork.com/fl/armandofrias" target="_blank">Here.</a>
</p>

<p style="text-align: center; font-size: 14pt;"> <u>Projects</u> </p>

<a href="http://workinprogress.agency/" target="_blank">
  <img src="https://imagizer.imageshack.us/v2/424x283q90/922/l43R2Y.jpg" alt="Nuclear Plant" align="left" style="margin-left: 150px; margin-top: 25px" height="300px" width="400px">
</a>

<a href="http://workinprogress.agency/" target="_blank">
  <img src="https://imagizer.imageshack.us/v2/1020x680q90/924/2VMA4f.jpg" alt="SpaceX Launch" align: "center" style="margin-left: 150px; margin-top: 25px" height="300px" width="500px">
</a>

<a href="http://workinprogress.agency/" target="_blank">
  <img src="https://imagizer.imageshack.us/v2/275x183q90/923/KfsrjN.jpg" alt="Code" align: "right" style="margin-left: 150px; margin-top: 25px" height="300px" width="400px">
</a>

Answer 1

我总是使用自己的脚本，希望这适合你。

确保在<head>标记中包含jQuery，如下所示：

<强> HTML：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<强> JavaScript的：

$(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 - $('.header').outerHeight(true)
                }, 1000);
            }
        }
        return false;
    });
});

这样做，您仍然可以控制用户（让我们说）滚动时会发生什么：

$(function() {

    // previous code

    $(window).on('touchmove wheel mousewheel', function(e) {
        if ( e.type == "wheel" || e.type == "touchmove") {
            $('html, body').stop();
        }
    });
});

这样，只要用户手动开始滚动（动画仍在运行），动画就会停止。

如何在导航栏中添加滚动功能？

1 个答案: