点击按钮时滚动页面到同一页上的链接

Question

这是我的代码，没有显示任何错误，但也没有跳转到 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>

- Deepika Karande

---

请确保DivIdToScroll是一个ID而不是一个类。 - Chonchol Mahmud

可能是 jQuery 滚动到元素 的重复问题。 - SwiftArchitect

Answer 1

我从您提供的代码中准备了一个代码片段。我只是创建了一个长容器，并在底部插入了一个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>

- thereisnospoon

---

谢谢，现在正常工作了。在函数中添加 window.location.href='#DivIdToScroll'; 之前 div 是隐藏的。这就是原因。当我把它放在函数末尾时，它就工作得很好。 - Deepika Karande

Answer 2

无动画效果

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>

- ankitkanojia

Answer 3

您可以尝试这组代码，它还具有动画效果。

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

这是jQuery代码。

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

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

这里是内容区域

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

- Adas