Question

我创建了一个按钮，当单击该按钮时，它会向下滚动到页面的下一部分。

scroll(el) {
  el.scrollIntoView({ 
    behavior: 'smooth',
    block: 'start' 
  });
}

<span class="btn"><a (click)="scroll(forecast)">CheckForecast</a</span>
<div #forecast class="container-fluid">

现在，当它向下滚动时，该部分的顶部将隐藏在固定顶部的navBar后面。我需要补偿我最上面的navBar的高度，使其一直向下滚动！？

谢谢大家。

Answer 1

这是最后对我有用的代码：

scroll(el) {
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start'});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

Answer 2

HTML和JS完全错误的事实。这是一个解决方案，您可能需要满足您的需求，但是可以正常工作并且非常简单：

function scrollto(elna) {
  let el = document.getElementById(elna);
  el.scrollIntoView();
}

<span class="btn"><a onclick="scrollto('forecast')">CheckForecast</a></span>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="forecast" class="container-fluid">Some forecast</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

br标签仅在其中有一定空间，根本看不到任何效果。

但是要说一些话。如果提供摘要，请确保没有任何语法错误。您缺少开头的a-tag，缺少关键字功能，并且代码段中还没有包含angular。

要使其适合角度，您需要找出如何获得所需的元素引用。有很多教程。

向下滚动时如何在顶部添加20px

2 个答案: