jQuery srollTop难题

时间:2016-06-09 00:42:02

标签: javascript jquery scrolltop

我目前在jQuery中使用scrollTop()函数时遇到了困难。此时,平滑滚动功能滚动到预期的部分,然后在功能完成运行后弹回到它。我在最后添加了一个jsFiddle,但这是我的脚本:

HTML:

<nav id='menu2' class='menu2'>
    <ul>
      <li class='marker'></li>
      <li class='item2'><a id='step1link' href='#bs1'>Baby Step 1</a></li>
      <li class='item2'><a id='step2link' href='#bs2'>Baby Step 2</a></li>
      <li class='item2'><a id='step3link' href='#bs3'>Baby Step 3</a></li>
    </ul>
  </nav>

  <div class='content'>
    <section class='babystep' id='bs1'>
      <h1>Baby Step 1</h1>
      <h5>second-title</h5>
      <p>content</p>
      <p>content</p>
    </section>

    <section class='babystep' id='bs2'>
      <h1>Baby Step 2</h1>
      <h5>Pay off all debt using the Debt Snowball</h5>
      <p>content</p>
      <p>content</p>
    </section>

    <section class='babystep' id='bs3'>
      <h1>Baby Step 3</h1>
      <h5>second-title</h5>
      <p>content</p>
      <p>content</p>
    </section>

使用Javascript:

$(document).ready(function() {
  $('a').on('click', function(e) {
    if(this.hash !== "") {
    e.preventDefault();

    const hash = this.hash;

    $('.content').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {
      window.location.hash = hash;
      })
    }
  })
})

我已经尝试了建议的$(&#39; html,正文&#39;)而不是$(&#39; .content&#39;),这只是成功滚动整个页面,而不是div部分需要滚动的元素。

jsFiddle:https://jsfiddle.net/hollisd09/wa67wLc1/

1 个答案:

答案 0 :(得分:1)

更改此行:

scrollTop: $(hash).offset().top

进入这个:

scrollTop: $(hash).offset().top - $('.content').offset().top + $('.content').scrollTop()