[Intermediate jQuery] ScrollTo not working in a fixed div. help please

http://teslamotors.webflow.com/designer-tool-v2

when you click on a option, the next row of options fades in. What is supposed to happen is the div should scroll down on its own to reveal it.


I commented the below code out.

Y = $('.tms-step[data-step=' + attr + ']').offset().top + 75
		console.log(Y)
	 $('.customizer').animate({
	        scrollTop: Y
	     }, 500);
1 Like

Hey @PixelGeek, give this a shot:

var $customizer = $('div.customizer');
          
// Calculate top position of the outer node and the step we want to scroll to
var customizerTop = $customizer.offset().top;
var stepTop = $('.tms-step[data-step=' + attr + ']').offset().top;

// Calculate pixel difference pixels between outer node and the next step
var scrollDiff = stepTop - customizerTop;

// Apply the difference to the current scroll offset
var oldScrollTop = $customizer.scrollTop();
var newScrollTop = oldScrollTop + scrollDiff;

// Smooth scroll
$customizer.animate({
  scrollTop: newScrollTop
}, 500);

I couldn’t really test it with your site, but the general idea is that you calculate the difference between the offsets of the outer container and the step you want to scroll to, and then you apply that difference to the current scroll position.

Also note that it’s much safer to append var before variable names (e.g. var Y = ... is much better than Y = ... since the latter will put the variable into the global scope, which can lead to some unpredictable funkiness).

2 Likes

thanks for the help. I’ll try it out now. =)

it worked! Thanks! =D

1 Like