SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery scrollto breaks links (for most browsers) when using Foundation

    So I'm building a site using Foundation 4. It's a one page website, so I have a sidebar with anchor links to sections of the content.

    The anchor links work just fine on their own, but whenever I try to animate the scroll the links just break and do nothing when you click them.

    I've tried so many different methods, and all have the same outcome.

    Not sure if it's something that is conflicting with Foundation or if it's something I'm not doing right.

    The strange thing is, it works in Safari and a few mobile browsers but not for Chrome, IE, Firefox and Opera on desktop.

    Anyway, heres the fiddle http://jsfiddle.net/nTSXY/2/ (If you remove the js on the fiddle the anchors will work normally again)

    Any help is much appreciated

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi donmildreone. Welcome to the forums.

    Your script works fine for me in all browsers with a little tweak to the CSS:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    nav {width: 150px; position: fixed;}
    .nav-bar {
        padding: 20px;
    }
    
    .main-content {
        padding: 20px;
        margin-left: 200px;
        padding-bottom: 1000px; /*for testing scroll*/
    }
    
    p {
        margin-bottom: 200px;
    }
    
    </style>
    </head>
    <body>
    
    <div class="row">
        <div class="large-2 small-2 columns nav-bar">
            <nav>
                <ul>
                    <li><a href="#first">First</a></li>
                    <li><a href="#second">Second</a></li>
                    <li><a href="#third">Third</a></li>
                    <li><a href="#fourth">Fourth</a></li>
                    <li><a href="#fifth">Fifth</a></li>
                </ul>
            </nav>
        </div>
        <div class="small-8 large-8 main-content">
            <div class="row" id="first">
                <h1>First</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum.
                </p>
            </div>
            <div class="row" id="second">
                <h1>Second</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum.
                </p>
            </div>
            <div class="row" id="third">
                <h1>Third</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum.
                </p>
            </div>
            <div class="row" id="fourth">
                <h1>Fourth</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum.
                </p>
            </div>
            <div class="row" id="fifth">
                <h1>Fifth</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum.
                </p>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    
        // Click event for any anchor tag that's href starts with #
        $('a[href^="#"]').click(function(event) {
    
            // The id of the section we want to go to.
            var id = $(this).attr("href");
    
            // An offset to push the content down from the top.
            var offset = 60;
    
            // Our scroll target : the top position of the
            // section that has the id referenced by our href.
            var target = $(id).offset().top - offset;
    
            // The magic...smooth scrollin' goodness.
            $('html, body').animate({scrollTop:target}, 500);
    
            //prevent the page from jumping down to our section.
            event.preventDefault();
        });
    });
    
    </script>	
    </body>
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The problem is that you are scrolling the body element and as the nav and the main-content are 100vh (100% of the viewport height) then the body has no scroll so nothing happens because there is nowhere for it to scroll. Safari and mobile are probably working because they don't understand the vh unit I expect and as Ralphs code show you it will work if the elements are not contained within an overflow div.

    You should instead be scrolling .main-content:

    Code:
     $('.main-content').animate({scrollTop:target}, 500);
    However that will only work once as I don't think you will get the right scroll amount on subsequent clicks.

    Maybe @Pullo ; could help with routine here.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Maybe @Pullo ; could help with routine here.
    Sure could, but unless I'm mistaken Ralph has beaten me to it

    Or did I miss something?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Pullo View Post
    Sure could, but unless I'm mistaken Ralph has beaten me to it

    Or did I miss something?
    It depends on whether there is more to the page than we see in the fiddle.

    Yes Ralph's code will work and may indeed be a good solution but changes the dynamics of the page. The nav and main-content are set to 100vh (= 100% of the viewport height) and become independent elements without the nav having to be fixed (and avoids the problem of fixed elements).

    The issue with the existing code is that the you need to scroll inside .main-content and not the body but it only seems to work once when using .main-content as subsequent clicks are all out of kilter and don't match the destination correctly.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js "></script>
    <style>
    html, body, ul {
    	margin:0;
    	padding:0;
    }
    * {
    	-moz-box-sizing:border-box;
    	box-sizing:border-box
    }
    ul { list-style:none }
    .nav-bar {
    	height: 100vh;
    	padding: 20px;
    	float:left;
    	position:relative;
    	z-index:99;
    }
    .main-content {
    	height:100vh;
    	overflow: scroll;
    	padding: 20px;
    	border:1px solid #000;
    	position:relative
    }
    p { margin-bottom: 200px; }
    #fifth p { margin-bottom:0 }
    </style>
    </head>
    
    <body>
    <div class="row">
    		<div class="large-2 small-2 columns nav-bar">
    				<nav>
    						<ul>
    								<li><a href="#first">First</a></li>
    								<li><a href="#second">Second</a></li>
    								<li><a href="#third">Third</a></li>
    								<li><a href="#fourth">Fourth</a></li>
    								<li><a href="#fifth">Fifth</a></li>
    						</ul>
    				</nav>
    		</div>
    		<div class="small-8 large-8 main-content">
    				<div class="row" id="first">
    						<h1>First</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum. </p>
    				</div>
    				<div class="row" id="second">
    						<h1>Second</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum. </p>
    				</div>
    				<div class="row" id="third">
    						<h1>Third</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum. </p>
    				</div>
    				<div class="row" id="fourth">
    						<h1>Fourth</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum. </p>
    				</div>
    				<div class="row" id="fifth">
    						<h1>Fifth</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet libero a purus blandit condimentum. </p>
    				</div>
    		</div>
    </div>
    <script>
    $(document).ready(function() {
    
        // Click event for any anchor tag that's href starts with #
        $('a[href^="#"]').click(function(event) {
    
            // The id of the section we want to go to.
            var id = $(this).attr("href");
    
            // An offset to push the content down from the top.
            var offset = 60;
    
            // Our scroll target : the top position of the
            // section that has the id referenced by our href.
            var target = $(id).offset().top - offset;
    
            // The magic...smooth scrollin' goodness.
            $('.main-content').animate({scrollTop:target}, 500);
    
            //prevent the page from jumping down to our section.
            event.preventDefault();
        });
    });
    
    </script>
    </body>
    </html>
    However, It's probably best to wait for the OP to answer as Ralph's suggestion may do the job anyway and I will have wasted your time.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    However, It's probably best to wait for the OP to answer as Ralph's suggestion may do the job anyway and I will have wasted your time.
    No problem. I'm subscribed to the thread now, so I'll see any response.

    I hadn't actually heard of these viewport units (vw, vh, vmin, vmax), so I learned something already (although it is sometimes depressing how rapidly the web is evolving ...)


Bookmarks

Posting Permissions

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