Animated Scroll to an element with jQuery

Question

I have a animated scrollTop with jQuery.

$('.card > a').on('click', function(e) {
    e.preventDefault();
    var page = $(this).attr('href');

    $('.scrollable-content').animate( { scrollTop: $(page).offset().top }, 'slow');

    return false;
});

My problem, after the first click the others one won't scroll at the right place.

Here's the problem in action: https://jsfiddle.net/n2w8k7dc/

Click SECTION 1 = it's working.
Click now SECTION 2 = it's not working.

Do you know why ?

Thanks.

Answer 1

Because you are scrolling from page offset().top everytime. You have to put current position in the consideration as well.

Just 1 line change in your code. Replace your animate line with below:

$('.scrollable-content').animate( { scrollTop: $(page).offset().top + $('.scrollable-content').scrollTop() }, 'slow');

Answer 2

You neglect the current scroll position of your container. You need to calculate the animation based on the current position. So instead of this:

$('.scrollable-content').animate( { scrollTop: $(page).offset().top }, 'slow');

You need to do somehting like this:

var currentPosition = $('.scrollable-content').scrollTop();
var offset = $(page).offset().top;
var newPosition = currentPosition + offset;
$('.scrollable-content').animate( { scrollTop: newPosition}, 'slow');

Working example:

$(document).ready(function(){

	$('.card > a').on('click', function(e) {
		e.preventDefault();
		var page = $(this).attr('href');
		var currentPosition = $('.scrollable-content').scrollTop();
    var offset = $(page).offset().top;
    var newPosition = currentPosition + offset;
		$('.scrollable-content').animate( { scrollTop: newPosition}, 'slow');

		return false;
	});
});

body {
	font-family: 'Open Sans', sans-serif;
}

.opacity_0 {opacity: 0;}
.opacity_10 {opacity: 0.1;}
.opacity_20 {opacity: 0.2;}
.opacity_30 {opacity: 0.3;}
.opacity_40 {opacity: 0.4;}
.opacity_50 {opacity: 0.5;}
.opacity_60 {opacity: 0.6;}
.opacity_70 {opacity: 0.7;}
.opacity_80 {opacity: 0.8;}
.opacity_90 {opacity: 0.9;}
.opacity_100 {opacity: 1;}


.scrollable-content {
	width: 100%;
	height: 670px;
	overflow-y: auto;
}
.scrollable-content.small {
	margin-left: 500px;
	margin-right: 50px;
}
.scrollable-content.medium {
	margin-left: 300px;
	margin-right: 50px;
}
.scrollable-content.large {
	margin-left: 50px;
	margin-right: 50px;
}

.text {
	background: rgba(255, 255, 255, 0.8);
	text-align: left;
	font-size: 16px;
}
.text p, .text h1 {
	padding: 30px;
}
.text.small {
	margin-top: 400px;
	margin-bottom: 50px;
}
.text.medium {
	margin-top: 400px;
	margin-bottom: 50px;
}
.text.large {
	margin-top: 500px;
	margin-bottom: 50px;
}



.card-summary {
	width: 250px;
	left: 50px;
	bottom: 50px;
	position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-summary opacity_90">
	<div class="card mb-3">
		<a href="#01" class="card-body">
	    	SECTION 1
		</a>
	</div>
	<div class="card mb-3">
		<a href="#02" class="card-body">
	    	SECTION 2
		</a>
	</div>
	<div class="card mb-3">
		<a href="#03" class="card-body">
	    	SECTION 3
		</a>
	</div>
	<div class="card mb-3">
		<a href="#04" class="card-body">
	    	SECTION 4
		</a>
	</div>
</div>


<div class="scrollable-content small">
	<div class="text small">

		<span id="01">
			<h1 class="pb-0">SECTION 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo molestie metus vel imperdiet. Mauris fermentum malesuada neque at dictum. Donec vulputate placerat cursus. Sed accumsan purus id semper finibus. Nunc id tellus eget neque pellentesque porttitor. Duis neque magna, ultrices eleifend nulla at, mollis aliquam elit. Nam scelerisque enim a ligula luctus consectetur. Nullam ultricies leo ex, eget rutrum felis faucibus hendrerit. Nunc nibh diam, hendrerit quis maximus non, tempus eu nibh. Integer ut ornare massa, tristique volutpat ipsum. Vivamus et diam ex. Praesent ac sem non massa porttitor finibus quis vitae augue.</p>
		</span>

		<span id="02">
			<h1 class="pb-0">SECTION 2</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo molestie metus vel imperdiet. Mauris fermentum malesuada neque at dictum. Donec vulputate placerat cursus. Sed accumsan purus id semper finibus. Nunc id tellus eget neque pellentesque porttitor. Duis neque magna, ultrices eleifend nulla at, mollis aliquam elit. Nam scelerisque enim a ligula luctus consectetur. Nullam ultricies leo ex, eget rutrum felis faucibus hendrerit. Nunc nibh diam, hendrerit quis maximus non, tempus eu nibh. Integer ut ornare massa, tristique volutpat ipsum. Vivamus et diam ex. Praesent ac sem non massa porttitor finibus quis vitae augue.</p>
		</span>

		<span id="03">
			<h1 class="pb-0">SECTION 3</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo molestie metus vel imperdiet. Mauris fermentum malesuada neque at dictum. Donec vulputate placerat cursus. Sed accumsan purus id semper finibus. Nunc id tellus eget neque pellentesque porttitor. Duis neque magna, ultrices eleifend nulla at, mollis aliquam elit. Nam scelerisque enim a ligula luctus consectetur. Nullam ultricies leo ex, eget rutrum felis faucibus hendrerit. Nunc nibh diam, hendrerit quis maximus non, tempus eu nibh. Integer ut ornare massa, tristique volutpat ipsum. Vivamus et diam ex. Praesent ac sem non massa porttitor finibus quis vitae augue.</p>
		</span>

		<span id="04">
			<h1 class="pb-0">SECTION 4</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo molestie metus vel imperdiet. Mauris fermentum malesuada neque at dictum. Donec vulputate placerat cursus. Sed accumsan purus id semper finibus. Nunc id tellus eget neque pellentesque porttitor. Duis neque magna, ultrices eleifend nulla at, mollis aliquam elit. Nam scelerisque enim a ligula luctus consectetur. Nullam ultricies leo ex, eget rutrum felis faucibus hendrerit. Nunc nibh diam, hendrerit quis maximus non, tempus eu nibh. Integer ut ornare massa, tristique volutpat ipsum. Vivamus et diam ex. Praesent ac sem non massa porttitor finibus quis vitae augue.</p>
		</span>

	</div>
</div>