Attempting to achieve smooth scrolling on div tags by clicking anchor tags in a list using jQuery.
enter code here
function scrollThere(targetElement, speed) {
// initiate an animation to a certain page element:
$('html, body , #side').stop().animate(
{ scrollTop: targetElement.offset().top }, // move window so target
element is at top of window
speed, // speed in milliseconds
'swing' // easing
); // end animate
} // end scrollThere function definition
//--- START NAV-ITEM CLICK EVENTS ---//
// when the user clicks a nav item:
$("#leftSidebar ul li a").click(function (e) {
e.preventDefault(); // don't jump like a typical html anchor
// find the index of the "#" character in the href string...
var startOfName = $(this).attr('href').indexOf("#"),
// ...then use it as the argument in the slice() method (add 1 so you
don't include the # character).
clickRef = $(this).attr('href').slice(startOfName + 1),
targetEl = $('a[name=' + clickRef + ']'); // select the element this
link is pointing to
// scroll there smoothly:
scrollThere(targetEl, 400);
});
Encountering an issue where clicking on a link twice results in being taken to the top of the page and causing issues with scrolling. The scrolling behavior seems inconsistent as the size of the div tags increases. A demonstration of the problem can be found in this fiddle https://jsfiddle.net/60tp46y3/18/. Ideally, clicking on specific links on the left should smoothly scroll the right section to the corresponding id.