window.scrollTo 不滚动到提供的 id答案

【问题标题】：window.scrollTo not scrolling to provided idwindow.scrollTo 不滚动到提供的 id
【发布时间】：2020-12-20 21:37:50
【问题描述】：

我正在处理单个文档文件。当单击 id="about" 的锚点时，我想滚动到 id="projectpage" 的所需部分。

<a class="nav-link page-scroll"  href="" id="about">About Me</a>

<section id="aboutpage">

我尝试过使用

$('a#about').click(function(){
    $(window).scrollTo(0, document.getElementById('projectpage').offsetTop);
    
  });

甚至

$('#about').click(function(){
    $(window).scrollTo(0, document.getElementById('projectpage').offsetTop);
    
  });

但没有任何效果。

当我点击 id="about" 的锚点时，它只是将我重定向到 index.html（包含所有文档的主 HTML）文件本身，而不是转到 id="projectpage" 的 offsetTop。

【问题讨论】：

是#aboutpage 还是#projectpage ???

标签： jquery scrolltop scrollto

【解决方案1】：

您需要防止锚点的默认行为....使用.preventDefault()

然后将 $(window) 替换为 window... 当您希望在窗口上应用 vanilla JS 方法时，您不需要 jQuery 来查找窗口。

$('#about').click(function(e) {
  e.preventDefault()
  window.scrollTo(0, document.getElementById('aboutpage').offsetTop);
});

section{
  height: 200px;
  border-top: 2px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link page-scroll" href="" id="about">About Me</a>

<section id="somethingElse1">...</section>
<section id="somethingElse2">...</section>
<section id="somethingElse3">...</section>
<section id="aboutpage">About</section>
<section id="somethingElse4">...</section>
<section id="somethingElse5">...</section>

【讨论】：

【解决方案2】：

我用scrollIntoView()为你做了一个小例子。另外，考虑到event.preventDefault() 需要禁用默认点击标签a 的功能。

另外scrollIntoView()还有一个带动画过渡效果的参数：

behavior: "smooth"

注意：由于您使用的是jquery，因此我认为转换为以下元素没有意义：

document.getElementById('aboutpage')

申诉，如jquery：

$("#aboutpage")[0]

$('a#about').click(function(event){
  event.preventDefault();
    $("#aboutpage")[0].scrollIntoView({
    behavior: "smooth"
  }); 
});

#first {
  width: 100%;
  height: 1000px;
  background-color: green;
}

#aboutpage {
  width: 100%;
  height: 1000px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link page-scroll"  href="" id="about">About Me</a>

<section id="first"></section>
<section id="aboutpage"></section>

【讨论】：