Daniel's answer is probably the most straightforward approach and one that I would use if performing this task once in a while, but with a little Javascript prowess we can execute this in the console, because why not?
In the Console window of Chrome Dev Tools enter the following and press ENTER
:
document.getElementsByClassName('ClassName')[0].scrollIntoView(true);
Explanation:
document.getElementsByClassName('ClassName')
retrieves all elements that have the class name you are looking for.
The [0]
is the index you'll use to access the items in the collection of elements that were retrieved. Because this is a zero-based array, [0]
gets you the first instance of the class name you're looking for.
Finally, scrollIntoView(true)
does exactly what it says, surprisingly, by scrolling the element, which in this case is the first element that has the class name of "ClassName", into view. The true
argument that is passed in tells the method to align the element with the top of the window. false
would align it to the bottom.
So if you find yourself repeating this task for a large page, as you say you are, you could execute this function once, press UP
on the console window, change the index, rinse wash and repeat. Like so:
document.getElementsByClassName('ClassName')[0].scrollIntoView(true); //First item
document.getElementsByClassName('ClassName')[1].scrollIntoView(true); //Second item
document.getElementsByClassName('ClassName')[2].scrollIntoView(false); //Third item, aligned to the bottom of the screen
Hope this helps.