Javascript scrollTop不起作用

Question

I am trying to use javascript to scroll a div down like this...

  $(document).ready(function() { var list = document.getElementsByClassName('list'); list.scrollTop = 110; }); 

 .list{height:100px;background:wheat;color:white;overflow:hidden; overflow-y: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla. Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus. Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero. Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo. In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. </div> 

It is not moving though, what am I doing wrong?

Answer 1

The function getElementsByClassName returns a list of elements and not specific element, and you can't use scrollTop on a list of elements. This method belong to the DOM Element object.

What you can do is take the first element you found and run that on this element:

var list = document.getElementsByClassName('list');
list[0].scrollTop = 110;

Of you can go over all the elements you found and set the scrollTop of each of them:

Array.prototype.forEach.call(list, function(el) {
    el.scrollTop = 110;
});

Here is the fix to your snippet with the first option:

 $(document).ready(function() { var list = document.getElementsByClassName('list'); list[0].scrollTop = 110; }); 

 .list{height:100px;background:wheat;color:white;overflow:hidden; overflow-y: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla. Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus. Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero. Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo. In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. </div> 

Answer 2

As Dekel pointed out, getElementsByClassName returns an array, not an element. However, since you're already using jQuery I'd recommend that you instead just use that instead to set the scroll:

 $(document).ready(function() { $('.list').scrollTop(110); // use jQuery instead of vanilla JS }); 

 .list{height:100px;background:wheat;color:white;overflow:hidden; overflow-y: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla. Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus. Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero. Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo. In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. </div> 

Answer 3

You can also use div.scrollTop=div.scrollHeight it will work for you.

 var divEl = document.querySelector('div.list'), scrollHeight = divEl.scrollHeight; divEl.scrollTop=scrollHeight; 

 .list{ height:100px; background:#ccc; color:#5c5c5c; overflow:hidden; overflow-y: scroll; } 

 <div class="list"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a neque aliquet, lobortis dui fermentum, sagittis ante. Aenean ut elementum felis, sit amet sagittis leo. Mauris eget mattis nisl, non eleifend sem. Nam iaculis dapibus elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed enim maximus, aliquam arcu faucibus, lobortis tortor. Mauris egestas est vitae odio vulputate maximus. Aenean malesuada, ligula sed volutpat suscipit, lacus nisi malesuada lectus, sit amet sagittis nulla odio eu urna. Etiam pharetra enim purus, vitae tempus magna lacinia nec. In ac gravida enim. Integer lacinia vel leo non congue. Etiam et nibh quis felis varius aliquet quis vel odio. Vestibulum at dolor ut tortor vehicula dapibus in nec nulla. Vestibulum rhoncus sed risus eget imperdiet. Proin tincidunt quam et consectetur sodales. Donec venenatis erat at mollis scelerisque. Integer nec dolor at nibh accumsan condimentum. In sed dignissim justo, et dictum risus. Nulla faucibus suscipit est, in scelerisque nulla ultricies in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur eleifend tristique justo, semper porta sapien vestibulum at. Vestibulum enim purus, mattis ut gravida non, convallis ac nisl. Nulla ut dapibus lacus. Morbi scelerisque nisl vel tellus elementum auctor non ut turpis. Aenean porta quis nisi ac venenatis. Maecenas fringilla justo vitae arcu iaculis, eget tempus nibh feugiat. Suspendisse vel volutpat nulla, sit amet sagittis lorem. Duis mollis sed lectus eu faucibus. Sed feugiat tempor felis, vel viverra elit ultrices non. Aenean lobortis efficitur orci imperdiet dignissim. Phasellus accumsan nunc non volutpat euismod. Duis dui lectus, luctus facilisis ornare nec, ornare nec urna. Mauris laoreet lacus purus, quis vestibulum ligula aliquet eu. Ut non dapibus ligula. Donec ac tortor ut sapien finibus condimentum. Integer eu lectus tincidunt lorem suscipit eleifend id at quam. Aenean non turpis sit amet dolor condimentum laoreet. Mauris condimentum gravida eros, et auctor libero tempus nec. Morbi dignissim ligula nec est egestas efficitur non eget leo. Etiam varius, orci et blandit euismod, metus ipsum maximus tortor, eget viverra ligula mi a arcu. Nullam pellentesque vehicula nunc, eget egestas leo volutpat vitae. Duis risus tellus, tincidunt in eleifend sed, maximus a libero. Suspendisse gravida scelerisque magna in fermentum. In luctus nisi in vehicula finibus. Quisque hendrerit eu massa in consectetur. Sed rutrum eu tortor vitae mollis. Nullam gravida egestas ex id dapibus. Phasellus odio enim, aliquam sed urna vel, sodales rutrum libero. Duis congue mauris vel sagittis ultrices. Vivamus quam quam, porta id varius non, lacinia vel nisl. In nec urna nec metus pellentesque ultrices. Phasellus eget scelerisque libero, et pulvinar nisi. Duis sit amet bibendum lacus. Vivamus facilisis purus eu neque pellentesque lobortis. Morbi mi nunc, aliquam ut congue sit amet, viverra quis justo. In faucibus, ligula et condimentum faucibus, nisi lacus consectetur quam, in placerat tortor massa a mi. Phasellus id hendrerit mi, ut accumsan velit. Pellentesque et ultrices justo. Praesent eu auctor diam. Morbi malesuada tellus sit amet risus lobortis, eget consectetur lectus placerat. Suspendisse cursus risus tellus, id elementum nisl vehicula eget. Etiam laoreet lacus id lacus facilisis, nec tristique nisi laoreet. Sed ultricies ut nulla non consectetur. Integer convallis venenatis nulla, hendrerit porta quam pellentesque vel. Suspendisse euismod, odio vitae malesuada egestas, mauris metus condimentum massa, dignissim dapibus urna tortor ac enim. Nullam ut aliquet sapien. Aenean ut felis tristique, varius tortor ac, tristique ipsum. In id imperdiet metus. Vestibulum fermentum id justo nec aliquet. Donec fringilla efficitur suscipit. </div>