Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post

    Having a small problem with this scroll function

    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.

    Code:
    	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);

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,771
    Thanks
    23
    Thanked 550 Times in 549 Posts
    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).

  • #3
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Well, it sounded easy enough. Any suggestions?

    Code:
    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;
    	
    }

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    did you try what I told you before, about scrolling back to the top of the div before scrolling down again?

    Code:
    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);
    
    }

  • #6
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by xelawho View Post
    did you try what I told you before, about scrolling back to the top of the div before scrolling down again?

    Code:
    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.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    hmm. unlikely. scrollTop happens pretty quickly. have you tried using offset().top and getting the value after scrolling back up?

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •