window.scrollTo 不滚动到提供的 id

问题描述

我正在处理单个文档文件。当单击 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。>

解决方法

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

将 $(window) 替换为 window...当您希望在其上应用原生 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>

,

我使用 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>