NoobProgramer =「需要對此JQUERY平滑滾動代碼進行解釋」

-1

下面的Javascript有什麼作用？有人能解釋一下這個平滑的滾動API中的每一行嗎？NoobProgramer =「需要對此JQUERY平滑滾動代碼進行解釋」

$('a').click(function(){  //when you click 'a' run this function 
     $('html, body').animate({    // animate what is in the html and body? 
     scrollTop: $($(this).attr('href')).offset().top //grab coordinates? 
     }, 800);        // scroll speed? 
     return false;      // not sure what this means 
    });

來源

2016-12-29 Mar Bocatcat

'返回false;'取消點擊動作。關於animate的文檔：http：//api.jquery.com/animate/ jquery多選擇器https://api.jquery.com/multiple-selector/ – epascarello

幾乎所有的好東西......'$（'html，body'）'是DOM選擇器（我認爲HTML不包括在內）......並且「返回false」會阻止「a」按預期工作（當您單擊「a」元素時，您正在執行自定義行爲，所以您不需要默認行爲） – Hackerman

'return false'與'function（ev）{ev.preventDefault（）;'相同，就像@epascarello所說的那樣，只是當你點擊鏈接時它不會重定向到'href =「」' – Baruch

好吧，讓我們的開始，第2行是正確的從你的調查

$('a').click(function(){  //when you click 'a' run this function 
    $('html, body').animate({  // animate the actual body and html element?

下一行是有點棘手。讓我們把它分解

$(this).attr("href")

點擊的元素（一）href屬性值（在這種情況下，它可能是這樣的＃test1的或＃TEST2

$($(this).attr("href")

如果以上的值爲「＃TEST1 「選擇變成$（」＃TEST1' ），這符合項目與id=test1

$().offset().top

所有元素你有該元素的座標文件偏移方法，一個個的e變量是距離文檔頂部的距離的頂部。

因此下一行會發現，需要滾動

 scrollTop: $($(this).attr('href')).offset().top 
    }, 800);   // this is the scroll speed 
    return false; // this will stop the anchor element from executing the default functionality, which is actually navigating to the href specified. 
});

我希望這有助於像素總量：P

來源

2016-12-29 15:01:21

謝謝！我想我現在明白了。 –

NoobProgramer =「需要對此JQUERY平滑滾動代碼進行解釋」

回答

相關問題