javascript - I can't get my website to smooth scroll -
i'm trying anchor tags scroll down sections of website can't work. i'm getting code from: http://www.cmscanbesimple.org/blog/smooth-page-scroll-to-an-anchor. copied own html file , worked can't figure out why it's not working on site.
<head> <meta charset="utf-8"> <title>j2 productions</title> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="parrallax.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="index.js"></script> </head> <body> <div class="parallax"> <div class="parallax__layer parallax__layer--back"> <div id="paintsplash"> <img src="paint_splash.png" height="93%" width="93%" /> </div> </div> <div class="parallax__layer parallax__layer--base"> <div id="middle"> <div id="services"> <div id="s_content"> <div id="s_title"> <p>beats</p> </div> <div id="beat1"> <p>| limitless |</p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat2"> <p>| haze |</p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat3"> <p>| self-destruct |</p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat4"> <p>| midnight bass |</p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> </div> </div> <div id="recent"> <div id="r_content"> <div id="r_title"> <p>recent</p> </div> <div id="one"> <a href="https://itunes.apple.com/us/album/one-ep/id984646172"> <img src="front%20cover.jpg" width="300"> </a> </div> <div id="onetxt"> <p align="center"> | speaking language | <br/>| pay | <br/>| 1 way | </p> </div> <div id="rollin"> <a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884"> <img src="rollin.jpg" width="300"> </a> </div> <div id="rollintxt"> <p align="center">| rare of breed - rollin' |</p> </div> </div> </div> <div id="pricing"> <div id="p_content"> <div id="p_title"> <p>pricing</p> </div> <div id='exclusive'> <img src="exclusive.png" width="650"> </div> <div id="custom"> <img src="custom.png" width="650"> </div> </div> </div> <div id="aboutme"> <div id="a_content"> <div id="a_title"> <p>contact me</p> </div> <div id="me"> <img src="me.png" width='350px' /> </div> <div id="email"> <img src="contact.png" width="100%" height="600px"> </div> <div id="social"> <div id="fb"> <a href="https://www.facebook.com/j2producing"> <img src="facebook.png" width="113px"> </a> </div> <div id="tw"> <a href="https://twitter.com/j2_productionz"> <img src="twitter.png" width="113px"> </a> </div> <div id="ig"> <a href="https://instagram.com/j2productions"> <img src="instagram.png" width="123px"> </a> </div> <div id="yt"> <a href="https://www.youtube.com/channel/uc2z9nuizhdu6fn-ufoie6qa"> <img width="123px" src="youtube.png"> </a> </div> <div id="gp"> <a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en"> <img src="google.png" width="115px"> </a> </div> <div id="sc"> <a href="https://soundcloud.com/j2productions"> <img src="soundcloud.png" width="115px"> </a> </div> </div> </div> </div> <div id="seperators"> <a id="page1"></a> <div id="page2"></div> <div id="page3"></div> <div id="page4"></div> </div> </div> </div> </div> <div id="top"> <a href="index.html"> <img src="j2productions-text.png" id="logo" draggable="false"> </a> <a href="#page1" class="nav scroll" id="home">beats</a> <a href="#page2" class="nav scroll" id="beats">recent</a> <a href="#page3" class="nav scroll" id="contact">pricing</a> <a href="#page4" class="nav scroll" id="about">about me</a> <img src="line.png" id="line"> </div> <div id="bottom"></div> <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#paintsplash').fadein(1200).delay(3500); }); </script> <script type="text/javascript"> jquery(document).ready(function($) { $(".scroll").click(function(event) { event.preventdefault(); $('html,body').animate({ scrolltop: $(this.hash).offset().top }, 1000); }); }); </script> </body>
the anchor href target id. since anchor href set #page1, target <a id="page1">. must change them. example:
<div id ="top"> <a href="index.html"><img src="j2productions-text.png" id="logo" draggable="false"></a> <a href="#services" class="nav scroll" id="home">beats</a> <a href="#recent" class="nav scroll" id="beats">recent</a> <a href="#pricing" class="nav scroll" id="contact">pricing</a> <a href="#separators" class="nav scroll" id="about">about me</a> <img src="line.png" id="line"> </div> edit
check this:
<div id="seperators"> <a id="page1"></a> <div id="page2"></div> <div id="page3"></div> <div id="page4"></div> </div> <div class="parallax"> <div class="parallax__layer parallax__layer--back"> <div id="paintsplash"> <img src="paint_splash.png" height="93%" width="93%"/> </div> </div> <div class="parallax__layer parallax__layer--base"> <div id="middle"> <div id="services"> <div id="s_content"> <div id="s_title"> <p>beats</p> </div> <div id="beat1"> <p> | limitless | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat2"> <p> | haze | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat3"> <p> | self-destruct | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> <div id="beat4"> <p> | midnight bass | </p></br> <iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3a//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe> </div> </div> </div> <div id="recent"> <div id="r_content"> <div id="r_title"> <p>recent</p> </div> <div id="one"> <a href="https://itunes.apple.com/us/album/one-ep/id984646172"> <img src="front%20cover.jpg" width="300"> </a> </div> <div id="onetxt"> <p align="center"> | speaking language |<br/> | pay |<br/> | 1 way | </p> </div> <div id="rollin"> <a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884"> <img src="rollin.jpg" width="300"> </a> </div> <div id="rollintxt"> <p align="center"> | rare of breed - rollin' | </p> </div> </div> </div> <div id="pricing"> <div id="p_content"> <div id="p_title"> <p>pricing</p> </div> <div id='exclusive'> <img src="exclusive.png" width="650"> </div> <div id="custom"> <img src="custom.png" width="650"> </div> </div> </div> <div id="aboutme"> <div id="a_content"> <div id="a_title"> <p>contact me</p> </div> <div id="me"> <img src="me.png" width='350px'/> </div> <div id="email"> <img src="contact.png" width="100%" height="600px"> </div> <div id="social"> <div id="fb"> <a href="https://www.facebook.com/j2producing"> <img src="facebook.png" width="113px"> </a> </div> <div id="tw"> <a href="https://twitter.com/j2_productionz"> <img src="twitter.png" width="113px"> </a> </div> <div id="ig"> <a href="https://instagram.com/j2productions"> <img src="instagram.png" width="123px"> </a> </div> <div id="yt"> <a href="https://www.youtube.com/channel/uc2z9nuizhdu6fn-ufoie6qa"> <img width="123px" src="youtube.png"> </a> </div> <div id="gp"> <a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en"> <img src="google.png" width="115px"> </a> </div> <div id="sc"> <a href="https://soundcloud.com/j2productions"> <img src="soundcloud.png" width="115px"> </a> </div> </div> </div> </div> </div> </div> </div> <div id ="top"> <a href="index.html"><img src="j2productions-text.png" id="logo" draggable="false"></a> <a href="#page1" class="nav scroll" id="home">beats</a> <a href="#page2" class="nav scroll" id="beats">recent</a> <a href="#page3" class="nav scroll" id="contact">pricing</a> <a href="#page4" class="nav scroll" id="about">about me</a> <img src="line.png" id="line"> </div> <div id="bottom"> </div> <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#paintsplash').fadein(1200).delay(3500); }); </script> <script type="text/javascript"> jquery(document).ready(function($) { $(".scroll").click(function(event) { event.preventdefault(); $('html,body').animate( { scrolltop:$(this.hash).offset().top } , 1000); } ); } ); </script>
Comments
Post a Comment