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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need Help Animating scrollTop while using a Fixed Position Header

    Hi,

    I've created a web page that has a fixed position header and the content of the page scrolls behind it. I am also attempting to use jQuery to animate the page scrolling to several anchor tags I've created throughout the content of the page. I've got it to work, however, I can't seem to find a way to tell it to navigate to the top of each div, instead it is going to the bottom. Can someone please help me? I'm exasperated! Thanks a million!


    Here's my code:

    Javascript:

    Code:
    $(document).ready(function() {
    
    var b = $('#about');
    
        $('#anchor1').click(function() {
            $('html, body').animate({
                scrollTop: b.offset().top - $(window).height() + b.outerHeight()
            }, 1500);
            return false;
        		});
    		
    		
    		
    var c = $('#overview');
    
        $('#anchor2').click(function() {
            $('html, body').animate({
                scrollTop: c.offset().top - $(window).height() + c.outerHeight()
            }, 1500);
            return false;
        		});
    			
    		
    		
    var d = $('#learn');
    
        $('#anchor3').click(function() {
            $('html, body').animate({
                scrollTop: d.offset().top - $(window).height() + d.outerHeight()
            }, 1500);
            return false;
        		});

    HTML:

    Code:
    <div id="header-container">
    		<div id="header" style="text-align: center;">
    			<ul>
    				<li> <a href="#anchorOne" rel="" id="anchor1" class="anchorLink"> About </a> </li>
                                    
    				<li> <a href="#anchorTwo" rel="" id="anchor2" class="anchorLink"> Overview </a> </li>
                    
    				<li> <a href="#anchorThree" rel="" id="anchor3" class="anchorLink"> Learn </a> </li>
    
    			</ul>
    		</div>
    	</div>
    
    
    
    
    <div id ="content">
    
    <div id="explore" style="text-align: center;">   
      				<a name="anchorOne" id="anchorOne"> <img src="images/explore-img.jpg" /> 
                    </a>
              </div>
    
    <div id="play" style="text-align: center;">    
     				<a name="anchorTwo" id="anchorTwo"> <img src="images/play-img.jpg" /> </a>
                </div>
    
    <div id="audience" style="text-align: center;">  
       				<a name="anchorThree" id="anchorThree"> <img src="images/audience-img.jpg" /> </a>
                </div>
    
    
    
    </div

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Don't you just need to change:

    Code:
            $('html, body').animate({
                scrollTop: b.offset().top - $(window).height() + b.outerHeight()
            }, 1500);
    to

    Code:
            $('html, body').animate({
                scrollTop: b.offset().top - $(window).height()
            }, 1500);
    Adding the outerHeight of your element is going to make it scroll to the bottom rather than the top, surely?

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you! you were right. and I also needed to change the window height to subtracting the height of the header. I must have been very sleep deprived yesterday because things just weren't making sense. I see it now! Thank you!


  •  

    Posting Permissions

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