Question

我正在尝试实现Scroll-Effect，但它只能部分工作。当我向下滚动它时，但是当我向上滚动时，它是一个直线跳跃。

html{
   scroll-behavior: smooth;
}
section{
  height:100vh;
  margin:0;
  padding:10px;
  
}
navbar{
  position:sticky;
  top:0;
}

<navbar>
  <a href="#welcome"><b>ABOUT</b></a>
  <a href="#project"><b>PROJECT</b></a>
</navbar>
<section id="Welcome" style="background-color:black;color:White;">
  <h1>
  Hi This is Akhil!
  </h1>
</section>
<section id="project" style="background-color:Red;color:white;">
  <h1>
  This is project section
  </h1>
</section>

Answer 1

您的<a href="#welcome"><b>WELCOME</b></a>为小写字母，请尝试使用大写字母以匹配您的ID。

Answer 2

您的问题是您使用的标记<navbar>在HTML中不是有效的标记。因此，这导致您的滚动行为以不希望的方式起作用。

相反，您应该使用<nav>标签，这是一个有效的标签（您需要更改CSS才能使用nav标签而不是navbar标签）。另外，请确保您要滚动的部分的href和id都完全匹配（大小写）

html {
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  margin: 0;
  padding: 10px;
}

nav {
  position: sticky;
  top: 0;
}

<nav>
  <a href="#welcome"><b>ABOUT</b></a>
  <a href="#project"><b>PROJECT</b></a>
</nav>

<section id="welcome" style="background-color:black;color:white;">
  <h1>
    Hi This is Akhil!
  </h1>
</section>
<section id="project" style="background-color:red;color:white;">
  <h1>
    This is project section
  </h1>
</section>

Answer 3

$(document).ready(function() {
	$('a[rel="relativeanchor"]').click(function(){
	    $('html, body').animate({
	        scrollTop: $( $.attr(this, 'href') ).offset().top
	    }, 800);
	    return false;
	}); 
});

html{
   scroll-behavior: smooth;
}
section{
  height:100vh;
  margin:0;
  padding:10px;
  
}
navbar{
  position:sticky;
  top:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="top">How to make smooth scrolling.</h1>

<a href="#mysection1" rel="relativeanchor">Section 1</a>
<a href="#mysection2" rel="relativeanchor">Section 2</a>

<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>

<div id="mysection1">Section 1</div>


<div style="height: 1500px;">This requires jQuery. <a href="#top" rel="relativeanchor">Go Back to Top</a></div>
    


<div id="mysection2">Section 2</div>

    <a href="#top" rel="relativeanchor">Go Back to Top</a>

希望这对您有帮助。您可以处理您的代码。

这里是reference

滚动行为效应

3 个答案: