jQuery的srollTop難題

我目前有在jQuery的瀏覽器對scrollTop（）函數的困難。目前，平滑的滾動功能滾動通過預定部分，然後一旦功能完成運行就回彈。我已經包括的jsfiddle在本月底，但這裏是我此刻的腳本：jQuery的srollTop難題

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; 
     }) 
    } 
    }) 
})

我已經嘗試了建議$（」 HTML，body'）而不是$（'。content'），它只能滾動整個頁面，而不是帶有需要滾動的部分元素的div。

的jsfiddle：https://jsfiddle.net/hollisd09/wa67wLc1/

來源

2016-06-09 Danielle Powell

你忘了，包括你的小提琴了jQuery庫。 – Marcus

菜鳥錯誤！感謝您告訴我@Marcus。現在更新 –

改變這一行：

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

到這一點：

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

來源

2016-06-09 01:32:50 Rio

你真不可思議！這像一個魅力。 –

@DaniellePowell如果您覺得我的答案可以解決您的問題，如果您將我的答案標記爲已接受的答案，我將不勝感激。 – Rio

jQuery的srollTop難題

回答

相關問題