滚动页面单击按钮以链接到同一页面答案

【问题标题】：Scroll page onClick of button to link on the same page滚动页面单击按钮以链接到同一页面
【发布时间】：2016-03-07 15:00:29
【问题描述】：

这是我的代码，它没有显示任何错误，但也不要转到href 位置。当我将 href 更改为“www.google.com”时，代码有效。为什么它不适用于同一页面链接？

<form>
<a href="#DivIdToScroll">
   <div id="btnLink" onClick="generateReport();"> Generate </div>
</a>
</form>

<script>
function generateReport()
{
    window.location.href = '#DivIdToScroll';
}
</script>

【问题讨论】：

确保 DivIdToScroll 是一个 id 而不是一个类。
jQuery scroll to element的可能重复

标签： javascript jquery html

【解决方案1】：

我根据您提供的代码准备了一个代码 sn-p。我刚刚制作了一个长容器，并在下部插入了一个 ID 为“DivIdToScroll”的 div。它似乎工作正常。您可能使用了类而不是 Id。希望对您有所帮助。

 function generateReport() {
   window.location.href = '#DivIdToScroll';
 }

.longContainer {
  height: 1000px;
  background: #eee;
}
.justTakingSpace {
  height: 600px;
  margin: 2px;
  background: #ddd;
}

<div class="longContainer">
  <form>
    <a href="#DivIdToScroll">
      <div id="btnLink" onClick="generateReport();">Generate</div>
    </a>
  </form>

  <div class="justTakingSpace"></div>

  <div id="DivIdToScroll">Oh you're here at "#DivIdToScroll". hello hello.</div>
</div>

【讨论】：

感谢现在的工作。在我添加 window.location.href = '#DivIdToScroll'; 之前，div 被隐藏了在功能上。这就是原因。当我把它放在功能结束时，它工作得很好。

【解决方案2】：

你可以试试这组代码，它也有动画。

<div id="DivIdToScroll">Go to link</div>

这里是jquery代码

$("#DivIdToScroll").click(function(){

$('html, body').animate({
        scrollTop: $("#scroll_div").offset().top
    }, 1000);
});

这是内容 div

<div id="scroll_div">Content</div>

【讨论】：

【解决方案3】：

没有动画

function generateReport() {
  window.location.href = '#DivIdToScroll';
}

<form>

  <a href="#DivIdToScroll">
    <div id="btnLink" onClick="generateReport();"> Generate </div>
  </a>

  <div style="height:500px">&nbsp;</div>

  <div id="DivIdToScroll">Go to link</div>

  <div style="height:500px">&nbsp;</div>
  
</form>

带动画

function generateReport() {
  $('html, body').animate({
    scrollTop: $("#DivIdToScroll").offset().top
  }, 1000);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <a href="#DivIdToScroll">
    <div id="btnLink" onClick="generateReport();"> Generate </div>
  </a>

  <div style="height:500px">&nbsp;</div>

  <div id="DivIdToScroll">Go to link</div>

  <div style="height:500px">&nbsp;</div>

</form>

【讨论】：