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>

Answer 1

我从您提供的代码中准备了一个代码段。我刚做了一个长容器，并插入了一个带有Id＆＃34; DivIdToScroll＆＃34;在下半部分。它似乎工作正常。您可能使用过类而不是Id。希望它有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 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>

滚动页面点击按钮以在同一页面上链接

3 个答案: