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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    SmoothScroll not working?

    Hi all,

    I'm going slightly insane here. Trying to get smoothScroll working on my site but can't seem to find the issue with my jQuery. I'm not very good with JS/jQuery so any help would be appreciated. I've posted all my code below.

    Live preview is here.

    Thanks in advance!
    Erica

    HTML
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ericalenti.com | Portfolio of Erica Lenti</title>
    
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    	<script type="text/javascript" src="//use.typekit.net/cbb3hbs.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    	
    	<script type="text/javascript" src="js/jquery.inview.js"></script>
    
    	<script type="text/javascript">
        	$(document).ready(function() {
            	$("body").css("display", "none");
        	});
    	</script>
    	<script src="js/fade.js" type="text/javascript"></script>
    
    	<script type="text/javascript" src="js/ticker.js"></script>
    	<script type="text/javascript">
    	$(function() {
      		$('#ticker').vTicker('init', {
    	 	speed: 1000, 
        	pause: 1000,
    		animate: true,
    		});
    	});
    	</script>
    	
    	    <!-- fixed position mod for ie6 and 7 -->
        <script type="text/javascript">
        function move_box() {
            var offset = 0; // set offset (likely equal to your css top)
            var element = document.getElementById('header');
        
            element.style.top = (document.documentElement.scrollTop + offset) + 'px';
        }
        </script>
        <!-- end fixed position mod -->
    
    	<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    	<script type="text/javascript">stLight.options({publisher: "b6b6cf7e-3730-438f-a8c1-3d8eb24fcc20"});</script>
    
    </head>
    
    <body>
    <!--main container-->
    <div id="container">
    
    <!--header-->	
    <div id="header">
    	<div id="navigation">
        	<ul>
            	<li><a href="#home">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#work">Work</a></li>
               <li><a href="#contact">Contact</a></li>
               <li><a href="http://thoughtsby.ericalenti.com" target="_blank">Thoughts</a></li>
           </ul>
        </div>
    </div>
    <!--end header-->
       
    <!--home-->
    <section id="home">
        <h1><span class="plus">+</span> Hi, I'm Erica Lenti.</h1>
        <div id="greeting">
          <h3>I'm a freelance journalist based in Toronto.<br />
            I write
            <div id="ticker">
              <ul>
                <li>features.</li>
                <li>news.</li>
                <li>essays.</li>
                <li>analysis.</li>
                <li>blogs.</li>
                <li>non-fiction.</li>
                <li>anything but fanfic.</li>
              </ul>
            </div></h3>
        </div>
    </section>
    <!--end home-->
    
    <!--about-->
    <section id="about"> 
        <div id="about-box">
        	<div id="about-box-content">
            	<h2>I write stuff.</h2>
               <p>Based in Toronto, Canada, I'm a young (but awesome) freelance journalist. My work has appeared in 	
               <a href="http://dailyxtra.com" target="_blank">Xtra! Canada</a>, <a href="http://this.org" target="_blank	"	
               >This Magazine</a>, <a href="http://canada.com" target="_blank">Canada.com</a>, <a href=	
               "http://thegridto.com" target="_blank"The Grid</a> and 
    			<a href="http://herizons.ca" target="_blank">Herizons Magazine</a>, and on <a href=	
                "http://thecanadianpress.com" target="_blank">The Canadian Press wire</a>. I also run an <a href=	
                "http://househippo.net" target="_blank">independent zine press</a>.</p>
              	<p>I'm currently honing my skills at the <a href="http://www.ryerson.ca/journalism/" target="_blank">
                Ryerson School of Journalism</a>. I plan to graduate in 2015.</p>
               <p>In my spare time, I watch a lot of <em>Degrassi</em>, annoy my hedgehog and pretend I know how to play 			 guitar.</p>
           </div>
        </div>
    </section>
    <!--end about-->
    
    <!--clear--><div id="clear"></div>
        
    </div>
    <!--end main container-->
    
    
    	<script type="text/javascript" src="js/smooth-scroll.js"></script>
    	<script>
    		$('html').smoothScroll(300);
    	</script>
        
    
    </body>
    </html>
    jQuery smoothScroll script I'm using
    Code:
    /*! http://mths.be/smoothscroll v1.5.2 by @mathias */
    ;(function(document, $) {
    
            var $scrollElement = (function() {
                // Find out what to scroll (html or body)
                        var $html = $(document.documentElement),
                            $body = $(document.body),
                            bodyScrollTop;
                        if ($html.scrollTop()) {
                                return $html;
                        } else {
                                bodyScrollTop = $body.scrollTop();
                                // If scrolling the body doesn’t do anything
                                if ($body.scrollTop(bodyScrollTop + 1).scrollTop() == bodyScrollTop) {
                                        return $html;
                                } else {
                                        // We actually scrolled, so undo it
                                        return $body.scrollTop(bodyScrollTop);
                                }
                        }
                }());
    
            $.fn.smoothScroll = function(speed) {
                    speed = ~~speed || 400;
                    // Look for links to anchors (on any page)
                    return this.find('a[href*="#"]').click(function(event) {
                            var hash = this.hash,
                                $hash = $(hash); // The in-document element the link points to
                            // If it’s a link to an anchor in the same document
                            if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
                                    // If the anchor actually exists…
                                    if ($hash.length) {
                                            // …don’t jump to the link right away…
                                            event.preventDefault();
                                            // …and smoothly scroll to it
                                            $scrollElement.stop().animate({ 'scrollTop': $hash.offset().top }, speed, function() {
                                                    location.hash = hash;
                                            });
                                    }
                            }
                    }).end();
            };
    
    }(document, jQuery));
    CSS
    Code:
    /* main */
    
    body, html {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	overflow-x: hidden;
    }
    
    body {
    	background: url('../images/bg-main.png') repeat #d0d8d6;
    	font-family: Helvetica, Arial, sans-serif;
    	color: #777;
    }
    
    /* header */
    
    #header {
    	width: 100%;
    	border-top: 8px solid #4c4b4b;
    	position: fixed;
    	margin: 0;
    	padding: 0;
    	z-index: 999;
    	background: #fff;
    	height: 45px;
    	background: rgba(0,0,0,0.04);
    }
    
    /* navigation */
    
    #navigation {
       	float: right;
       	width: 100%;
       	position: relative;
    	margin: 0;
    	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
    }
    
    		#navigation ul {
    			position: relative;
    			top: 9px;
    			float: right;
    			list-style: none;
    			margin: 0;
    			padding-right: 15px;
    			text-align: center;
    		}
    
    				#navigation ul li {
    					display: block;
    					float: left;
    					list-style: none;
    					margin: 0;
    					padding: 0;
    					position: relative;
    				}
    
    						#navigation ul li a {
    							float: left;
    							margin: 8px 20px;
    							padding: 0 0 3px 0;
    							text-decoration: none;
    							text-transform: uppercase;
    							font-size: 10pt;
    							color: #777;
    							height: 15px;
    							display: block;
    						}
    						
    							navigation ul li a.current {
    								padding: 0 0 3px 0;
    								color: #fff;
    								text-decoration: none;
    							
    								-webkit-transition: all .2s;
    								-moz-transition: all .2s;
    								-o-transition: all .2s;
    								-ms-transition: all .2s;
    								transition: all .2s;
    							}
    						
    								#navigation ul li a:hover {
    									padding: 0 0 3px 0;
    									color: #000;
    									text-decoration: none;
    								}
    						
    /* headers */
    
    h1 {
    	font-family: Helvetica, Arial, sans-serif;
    	font-weight: bold;
    	letter-spacing: -3px;
    	font-size: 60pt;
    	color: #4c4b4b;
    }			
    
    h2 {
    	font-family: Helvetica, Arial, sans-serif;
    	font-weight: bold;
    	color: #fff;
    	font-size: 36pt;
    }
    
    h3 {
    	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
    	font-size: 24pt;
    	font-weight: 200;
    }
    
    /* home */
    
    #home {
    	clear: both;
    	width: 100%;
    	min-height: 768px;
    	float: left;
    	padding: 150px 0 300px;
    	text-align: center;
    	position: relative;
    }
    
    .plus {
    	color: #889d96;
    }
    
    #greeting {
    	position: relative;
    	width: 650px;
    	padding-left: 100px;
    	margin: -50px auto;
    	text-align: left;
    
    }
    
    	#ticker {
    		position: absolute;
    		margin: -38px 0 0 90px;
    	}
    	
    /* about */
    
    #about {
    	background: url('../images/bg-about.jpg') center top no-repeat #555;
    	clear: both;
    	width: 100%;
    	min-height: 768px;
    	float: left;
    	padding: 150px 0;
    	text-align: center;
    	position: relative;
    }
    
    #about-box {
    	float: right;
    	margin-right: 50px;
    	width: 500px;
    	height: 500px;
    	background-color: rgb(55, 55, 55);
      	background-color: rgba(55, 55, 55, 0.7);
    	-webkit-border-radius: 6px;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
    }
    
    	#about-box-content {
    		text-align: left;
    		margin: -15px 0 0 15px;
    	}
    	
    		#about-box-content p {
    			font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
    			font-size: 14pt;
    			line-height: 24pt;
    			color: #bebcbc;
    			padding: 0 10px;
    		}
    		
    			#about-box-content p a {
    				color: #889d96;
    				text-decoration: none;
    			}
    			
    				#about-box-content p a:hover {
    					color: #889d96;
    					text-decoration: none;
    					border-bottom: dotted 1px #889d96;
    				}

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    What is it supposed to do that it is not doing? You need to be a little more descriptive than "it's not working"...


  •  

    Posting Permissions

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