Javascript DIV 通過 class 名稱滾動到底部不起作用

Question

我有一個內容很長的 div，這就是滾動條出現的原因。 我想要當用戶點擊一個按鈕時。 然后，div 滾動條轉到內容的末尾。 我試過這種方式，但沒有運氣。

我想在不使用 jQuery 的情況下實現這一點。

<div id="test" class="module-content">
<h3>
Welcome all!
</h3>
Lorizzle ipsizzle i saw beyonces tizzles and my pizzle went crizzle go to hizzle amizzle, fo adipiscing crunk. sapizzle velizzle, boom shackalack volutpizzle, suscipizzle quis, gravida vel, gizzle. Pellentesque bizzle bow wow wow. Sheezy bow wow wow. Phat at my shizz dapibus turpizzle tempizzle things. Away pellentesque nibh izzle bow wow wow. Hizzle izzle that's the shizzle. Fo shizzle eleifend rhoncizzle nisi. Hizzle hac owned platea dictumst. Bow wow wow dapibizzle. Own yo' tellus ma nizzle, pretizzle eu, fizzle fo shizzle my nizzle, eleifend sheezy, nunc. Da bomb brizzle. Gizzle sempizzle velit sizzle fo shizzle.
<br /><br />
Etiam rizzle urna nisl. Break it down quizzle izzle. Maecenizzle my shizz, ipsizzle malesuada shizzlin dizzle, the bizzle purizzle euismizzle check it out, et sure metus mammasay mammasa mamma oo sa et da bomb. Vivamus break it down, tortizzle izzle varius fizzle, nibh fo shizzle ultricizzle go to hizzle, izzle luctus leo fizzle in dolizzle. Mauris things, orci shut the shizzle up volutpizzle away, fo yo mamma luctizzle daahng dawg, izzle bibendum enim sheezy izzle nisl. Nullizzle fo shizzle velizzle shit orci shizzlin dizzle yo mamma. Fo shizzle daahng dawg own yo'. Curabitizzle i'm in the shizzle sheezy vel pede dope facilisizzle. Maecenizzle sapien nulla, boofron crunk, away pot, egestizzle a, eros. Its fo rizzle vitae turpizzle quis nibh bibendizzle fo shizzle. Nizzle yippiyo consectetizzle shizznit. Mah nizzle ghetto break it down. Nunc fo shizzle owned at go to hizzle pretizzle phat. Black uhuh ... yih! lacizzle check it out that's the shizzle my shizz ultricizzle. Shizznit nisl. Mah nizzle izzle urna. Integizzle cool ipsizzle in for sure. Owned sure yo mamma.
<br /><br />
Integizzle mammasay mammasa mamma oo sa metizzle izzle arcu interdum dang. Fo shizzle posuere. Sed funky fresh ante. Dizzle hizzle pede, bizzle ac, dizzle izzle, yo mamma quizzle, black. Vestibulizzle feugizzle. I saw beyonces tizzles and my pizzle went crizzle vehicula ultricizzle leo. Fo uhuh ... yih!, orci a suscipizzle rizzle, enim lacus mofo things, pizzle nizzle dizzle my shizz nizzle da bomb. Maecenizzle mofo shit fo shizzle my nizzle. Quisque dope mauris, nonummy doggy, malesuada izzle, brizzle varizzle, ass. In check it out, ligula cool pretizzle hendrerit, velizzle rizzle posuere nisl, a ghetto justo nizzle sizzle amet the bizzle. Aliquam izzle mah nizzle check it out cool bizzle crunk. Quisque aliquizzle tempizzle cool. Nam vehicula hendrerit maurizzle. Owned dawg. Crizzle pimpin' yo a mi. Stuff pimpin'. In hac its fo rizzle platea dictumst. Crizzle shiz check out this diam the bizzle tellivizzle. Get down get down erizzle ante, pulvinar pizzle, fringilla a, consectetizzle yo, nisl. Black vel nibh ut tempus fringilla.
<br /><br />
In sheezy da bomb nizzle cool. Yo ullamcorpizzle. Etiam mah nizzle. Ma nizzle izzle mi a check it out imperdizzle mofo. Dizzle vel ipsizzle. Sizzle iaculizzle shit break it down dope. Praesent a fo shizzle my nizzle vitae urna euismod fo shizzle my nizzle. Uhuh ... yih! nizzle risus. Vivamus go to hizzle things dang felis. Morbi dizzle ma nizzle. Etizzle eu dui ghetto magna lobortizzle. Morbi , ma nizzle nizzle crunk porta, fizzle fo shit nunc, mah nizzle boofron izzle dolor sizzle amizzle est. Things turpizzle. Vestibulizzle ante ipsizzle primis izzle faucibus orci luctus et my shizz posuere cubilia Stuff; Yo mamma vehicula, justo laorizzle bling bling fo shizzle, risus lorizzle gravida nunc, shizzlin dizzle fermentum urna metizzle quis nibh. That's the shizzle pretizzle erizzle izzle fizzle. Phasellizzle accumsan. Its fo rizzle fo shizzle fizzle penatibizzle for sure away dizzle break it down hizzle, go to hizzle ridiculus mus. Pimpin' nizzle massa shit quizzle ultrices congue. Donizzle non mi.<br /><br />

<h3>
End of this epic shizzle manizzle story yo.
</h3>
</div>

<button onClick="Scroll()">
    Scroll it !!
</button>

function Scroll() {
    var obj = document.getElementsByClassName('module-content');
    obj.scrollTop = obj.scrollHeight;
}

Answer 1

您實際上並不需要 javascript。 一個簡單的鏈接就可以了。 您也可以使用 javascript 來做到這一點，但我認為在這種情況下沒有理由這樣做。

這會起作用：

<div id="test">
    Bla bla bla
</div>

<br />

<a href="#test"></a>

如果你真的想用 javascript 來做，它會是這樣的：

document.getElementById("test").scrollIntoView(true);

如果您不想按頂部對齊，而是按底部對齊，請將 true 更改為 false。

Answer 2

getElementsByClassName返回HTMLCollection （多個匹配的元素）

嘗試像這樣訪問

function Scroll() {
    const allMatchedElements = document.getElementsByClassName('module-content');
    const moduleContent = allMatchedElements[0] //first matched element
    moduleContent.scrollTop = moduleContent.scrollHeight;
}

注意：這僅在您的元素有滾動條時才有效，如果它是瀏覽器滾動條，那么您可以像這樣滾動。

document.documentElement.scrollTop = document.documentElement.scrollHeight

 function Scroll() { const allMatchedElements = document.getElementsByClassName('module-content'); const moduleContent = allMatchedElements[0] //first matched element moduleContent.scrollTop = moduleContent.scrollHeight; }

 .module-content { max-height: 160px; overflow: auto; }

 <button onClick="Scroll()"> Scroll it,. </button> <div id="test" class="module-content"> <h3> Welcome all, </h3> Lorizzle ipsizzle i saw beyonces tizzles and my pizzle went crizzle go to hizzle amizzle, fo adipiscing crunk, sapizzle velizzle, boom shackalack volutpizzle. suscipizzle quis. gravida vel. gizzle. Pellentesque bizzle bow wow wow. Sheezy bow wow wow. Phat at my shizz dapibus turpizzle tempizzle things. Away pellentesque nibh izzle bow wow wow. Hizzle izzle that's the shizzle. Fo shizzle eleifend rhoncizzle nisi, Hizzle hac owned platea dictumst, Bow wow wow dapibizzle, Own yo' tellus ma nizzle, pretizzle eu. fizzle fo shizzle my nizzle. eleifend sheezy. nunc. Da bomb brizzle. Gizzle sempizzle velit sizzle fo shizzle, <br /><br /> Etiam rizzle urna nisl, Break it down quizzle izzle, Maecenizzle my shizz. ipsizzle malesuada shizzlin dizzle, the bizzle purizzle euismizzle check it out, et sure metus mammasay mammasa mamma oo sa et da bomb, Vivamus break it down. tortizzle izzle varius fizzle, nibh fo shizzle ultricizzle go to hizzle, izzle luctus leo fizzle in dolizzle, Mauris things. orci shut the shizzle up volutpizzle away. fo yo mamma luctizzle daahng dawg. izzle bibendum enim sheezy izzle nisl. Nullizzle fo shizzle velizzle shit orci shizzlin dizzle yo mamma, Fo shizzle daahng dawg own yo', Curabitizzle i'm in the shizzle sheezy vel pede dope facilisizzle, Maecenizzle sapien nulla, boofron crunk. away pot. egestizzle a. eros. Its fo rizzle vitae turpizzle quis nibh bibendizzle fo shizzle. Nizzle yippiyo consectetizzle shizznit. Mah nizzle ghetto break it down. Nunc fo shizzle owned at go to hizzle pretizzle phat. Black uhuh... yih. lacizzle check it out that's the shizzle my shizz ultricizzle. Shizznit nisl. Mah nizzle izzle urna. Integizzle cool ipsizzle in for sure. Owned sure yo mamma, <br /><br /> Integizzle mammasay mammasa mamma oo sa metizzle izzle arcu interdum dang, Fo shizzle posuere, Sed funky fresh ante, Dizzle hizzle pede. bizzle ac. dizzle izzle. yo mamma quizzle. black. Vestibulizzle feugizzle. I saw beyonces tizzles and my pizzle went crizzle vehicula ultricizzle leo, Fo uhuh,,. yih., orci a suscipizzle rizzle, enim lacus mofo things, pizzle nizzle dizzle my shizz nizzle da bomb, Maecenizzle mofo shit fo shizzle my nizzle. Quisque dope mauris, nonummy doggy, malesuada izzle, brizzle varizzle. ass. In check it out. ligula cool pretizzle hendrerit. velizzle rizzle posuere nisl. a ghetto justo nizzle sizzle amet the bizzle. Aliquam izzle mah nizzle check it out cool bizzle crunk. Quisque aliquizzle tempizzle cool. Nam vehicula hendrerit maurizzle. Owned dawg, Crizzle pimpin' yo a mi, Stuff pimpin', In hac its fo rizzle platea dictumst, Crizzle shiz check out this diam the bizzle tellivizzle. Get down get down erizzle ante. pulvinar pizzle. fringilla a. consectetizzle yo. nisl. Black vel nibh ut tempus fringilla. <br /><br /> In sheezy da bomb nizzle cool. Yo ullamcorpizzle. Etiam mah nizzle. Ma nizzle izzle mi a check it out imperdizzle mofo. Dizzle vel ipsizzle. Sizzle iaculizzle shit break it down dope. Praesent a fo shizzle my nizzle vitae urna euismod fo shizzle my nizzle. Uhuh.., yih, nizzle risus, Vivamus go to hizzle things dang felis. Morbi dizzle ma nizzle. Etizzle eu dui ghetto magna lobortizzle; Morbi, ma nizzle nizzle crunk porta, fizzle fo shit nunc, mah nizzle boofron izzle dolor sizzle amizzle est. Things turpizzle. Vestibulizzle ante ipsizzle primis izzle faucibus orci luctus et my shizz posuere cubilia Stuff. Yo mamma vehicula, justo laorizzle bling bling fo shizzle. risus lorizzle gravida nunc. shizzlin dizzle fermentum urna metizzle quis nibh. That's the shizzle pretizzle erizzle izzle fizzle. Phasellizzle accumsan. Its fo rizzle fo shizzle fizzle penatibizzle for sure away dizzle break it down hizzle, go to hizzle ridiculus mus. Pimpin' nizzle massa shit quizzle ultrices congue. Donizzle non mi.<br /><br /> <h3> End of this epic shizzle manizzle story yo. </h3> </div>