Javascript for Scrolling to a Desired Position on Web Page

February 8, 2017

I was putting together an index of wines that I have tasting notes for and thought it would be really nice to have a way of positioning the web page containing the tasting notes to the proper vertical position instead of at the top of a page and forcing users to scroll and find a particular wine.

For example, if you are looking for the tasting notes on the Michael David 2014 Petite Petite wine it would be nice to land on this view.

Instead of just the top of the page and have to scroll down to the bottom.

Doing a bit of searching on the web it looked like I needed to find the Y position of the desired tasting note somehow and then use the Javascript window.scroll function. Looking at the HTML from Google Docs that I use for blogging, to see my other blog posts concerning this;

http://themnmoores.net/RichBlogs/BloggingUsingGoogleDocsDec242016/BloggingUsingGoogleDocs.html

http://themnmoores.net/RichBlogs/2017/BloggingWithGoogleDocsPart2/BloggingWithGoogleDocsPart2.html

I could see that each paragraph of text is contained in a <span> tag.

What this means is that I only had to send an URL parameter when displaying the web page indicated unique text within the <span> of interest. For the Petite Petite example above this is done using the following URL.

http://themnmoores.net/RichBlogs/DecemberWines2016/DecemberWines2016.html?vertscrollspan=Petite_Petite

The URL parameter vertscrollspan is what indicates the unique text being looked for. Spaces are indicated by _’s since it was a pain to process HTML spaces. The Javascript function that does the work of getting the URL parameter and finding the appropriate <span> and it’s Y position is shown below.

The source for this function is contained in my formatting.js collection of Javascript functions.

First the code looks for an URL parameter vertscrollspan by getting the window.location.search property (not a very well named property IMHO):

For our example we get:

urlParameters:"?vertscrollspan=Petite_Petite"

If any URL parameters are found the code strips out the vertscrollspan parameter text only, making sure we take into account that there can be multiple URL parameters sent to a webpage. URL parameters are separated by an "c0">

var listOfSpans = document.getElementsByTagName("Span");

The resulting array is searched looking for a span object whose innerHTML property contains the text specified in the URL argument. If such a span is found, we use the span’s top offset to scroll the window.

window.scroll(0,span.offsetTop - 300);

The -300 is an attempt to better vertically center the content we are after.

To make sure the page has been rendered when we get the span top offset, setVerticalPositionToSpan is called as an onload callback for the <body> tag.

</head><body onload="setVerticalPositionToSpan()" class="c6">

In practice so far, so good.

keywords: Scrolling Webpage,Javascript,URL parameters

description: Using Javascript for vertical scrolling to a desired position on a web page