Having a small problem with this scroll function

[m2244]

Hello Good People,

So, here's the thing; I have a glossary div on the page which scrolls to a selected term. It works well, until the user selects a second term. In other words the user selects an initial term, the glossary scrolls to that term, then the user selects a second term (while the glossary is still open and scrolled), now the glossary gets confused and scrolls to a point that makes no sense.

You can see in the code below, I tried to reset the scroll to the top (which is actually at 92) but it still gets confused. I am wondering if it does not have time to get back to the top before it tries to run the animated scroll.

	var thisTerm = $('#glossaryContent span').filter(function() {
		return $(this).text() == evt;
	})
	
	alert(thisTerm.html());
	var spanOffset = thisTerm.position().top;
	$('#glossaryContent').scrollTop(92);
	$('#glossaryContent').animate({scrollTop: spanOffset}, spanOffset/2);

[sunfighter]

I think I'd get the position we're at (if that's possible) or store in in a global or a session cookie or session storage. Then do math on it to get the amount of scroll.

If your at 144 and the next term is at 94 you would do move back up 50. (94 - 144).

[m2244]

Originally Posted by sunfighter

I think I'd get the position we're at (if that's possible) or store in in a global or a session cookie or session storage. Then do math on it to get the amount of scroll.

If your at 144 and the next term is at 94 you would do move back up 50. (94 - 144).

Thanks for the help. I will try this right now.

[m2244]

Well, it sounded easy enough. Any suggestions?

var prevTermPosition = 0;
function glossScroll(evt)
{
	//alert(evt);
	//*********** This gets the offset of the target span tag. Offset is the offset distance from the parent element. ******************/
	//var thisTerm = $('#glossaryContent').find('span:contains(' + evt + ')');
	
	var thisTerm = $('#glossaryContent span').filter(function() {
		return $(this).text() == evt;
	})
	
	var scrollPosition = thisTerm.position().top;
	var currentTermPosition = thisTerm.position().top;
	var difference = currentTermPosition - prevTermPosition;
	//alert(currentTermPosition + " - " + scrollPosition + " = " + difference);
	alert(difference);
	//$('#glossaryContent').scrollTop(92);
	$('#glossaryContent').animate({scrollTop: prevTermPosition + difference}, currentTermPosition/2);
	
	prevTermPosition = currentTermPosition;
	
}

[xelawho]

did you try what I told you before, about scrolling back to the top of the div before scrolling down again?

function glossScroll(evt)
{
	//alert(evt);
	//*********** This gets the offset of the target span tag. Offset is the offset distance from the parent element. ******************/
	//var thisTerm = $('#glossaryContent').find('span:contains(' + evt + ')');
	
	var thisTerm = $('#glossaryContent span').filter(function() {
		return $(this).text() == evt;
	})
	
	var scrollPosition = thisTerm.position().top;
$('#glossaryContent').scrollTop(0);
$('#glossaryContent').scrollTop(scrollPosition);

}

[m2244]

Originally Posted by xelawho

did you try what I told you before, about scrolling back to the top of the div before scrolling down again?

function glossScroll(evt)
{
	//alert(evt);
	//*********** This gets the offset of the target span tag. Offset is the offset distance from the parent element. ******************/
	//var thisTerm = $('#glossaryContent').find('span:contains(' + evt + ')');
	
	var thisTerm = $('#glossaryContent span').filter(function() {
		return $(this).text() == evt;
	})
	
	var scrollPosition = thisTerm.position().top;
$('#glossaryContent').scrollTop(0);
$('#glossaryContent').scrollTop(scrollPosition);

}

Yes I did try that but I think that the scroll back to the top was still in progress when the animated scroll down began which caused it to scroll to a random position.

[xelawho]

hmm. unlikely. scrollTop happens pretty quickly. have you tried using offset().top and getting the value after scrolling back up?

$('#glossaryContent').scrollTop(0);
var scrollPosition = thisTerm.offset().top;
$('#glossaryContent').scrollTop(scrollPosition);