Scroll to Section with jQuery

Posted on July 25, 2017 by Dan Doicaru in jQuery/JavaScript Category with Medium Difficulty

In this tutorial you will learn how to properly scroll to section with jQuery using links or buttons with a helper class and smooth transitions. For button or input elements we will use a custom function to target the id of each section.

Video Tutorial

Not sure if anyone is still using buttons for actions instead of links, but anyway... I will provide two versions of this code. The one for buttons/inputs and the other one for links. Make sure to check the live demo at the end.

The HTML Structure

We will use plain links or buttons here, nothing fancy. Buttons or inputs will use the onclick event attribute to call the function and links will have a helper class to use it in our jQuery click event, so the scroll to section can work.

<a class="scrollTo" href="#section1">Section 1</a>
<a class="scrollTo" href="#section2">Section 2</a>

And for buttons (or inputs which they work the same):

<button onclick="scrollTo('#section1')">Section 1</button>
<button onclick="scrollTo('#section2')">Section 2</button>

Also, for sections we will use a simple id attribute:

<div id="sectionName">
	<p>Some content</p>
</div>

Scroll to Section using Links and Buttons

Code for Scroll to Section with jQuery

The action behind our scroll event is pretty simple. First, we get the string with our target container to know where to scroll should point at. After that, we detect what location does that element have inside our page and we execute the animation to smooth scroll to there.

For links, we will use href to point the section name and a custom class scrollTo just to trigger our event:

$('.scrollTo').click(function() {
	var getElem = $(this).attr('href');
	var targetDistance = 20;
	if ($(getElem).length) {
		var getOffset = $(getElem).offset().top;
		$('html,body').animate({
			scrollTop: getOffset - targetDistance
		}, 500);
	}
	return false;
});

The meaning of distance variable is to scroll above the section with few pixels above. The offset variable is to locate the element position in page.

For buttons and inputs we will use the onclick event with a custom function scrollTo("#elementId") that triggers the scroll.

function scrollTo(id) {
	if ($(id).length) {
		var getOffset = $(id).offset().top;
		var targetDistance = 20;
		$('html,body').animate({
			scrollTop: getOffset - targetDistance
		}, 500);
	}
}

As you can see above, we check if the targeted section or elements exists (to not throw an error) using the length special function. I wrote here an article long time ago on how to check if elements exists that might help you.

To achieve the smooth scroll to section effect, we will use the animate function to make a simple transition on the scroll movement. You can set your own speed by changing the number at the end of the animate function.

Live Demo

Download

Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 6 = 15

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.