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

Posted 2023-03-10

【中文标题】滚动页面单击按钮以链接到同一页面

【英文标题】：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的可能重复

【参考方案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>