Adding transition on scrollto feature in website when user clicks an anchor tag/link

JavaScript
, , ,
1

I’m trying to figure out how I can add transition on my website when user clicks on an anchor tag/link going to the specific div or part of the website. Sorry for my bad english.
I added the javascript on my website but it still scrolls instantly on to the specific div with no transition

Here is my work in progress.

   <div class="sidebar">
        <nav>
	        <ul>
		        <li><a href="#home">Home</a></li>
		        <li><a href="#menu">Menu</a></li>
		        <li><a href="#gallery">Gallery</a></li>
		        <li><a href="#contact">Contact</a></li>
		    </ul>
	    </nav>
    </div>


  
    <div class="content">
        <div id="home" class="munla-slides home-slide"></div>
        <div id="menu" class="munla-slides menu-slide"></div>
        <div id="gallery" class="munla-slides gallery-slide"></div>
        <div id="contact" class="munla-slides contact-slide"></div>
    </div>

  

  *{
        -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	    box-sizing:border-box
    }

    html, body{height:100%; overflow:hidden}

    .sidebar{
        width:20%; 
        float:left; 
        height:100%; 
        background-color:beige
    }

    .content{
        width:80%; 
        float:left; 
        height:100%; 
        background-color:teal; 
        overflow:hidden
    }

    .munla-slides{height:100%; width:100%; overflow-x:hidden}
    .munla-slides .box1{height:500px; width:300px; background-color:grey}

    .home-slide{background-color:#774040}
    .menu-slide{background-color:#17D8C5}
    .gallery-slide{background-color:#F96327}
    .contact-slide{background-color:#D34593}

    <script>
    $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $("html, body").animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
    </script>
2

  1. The code looks like jQuery. Are you loading the jQuery library too so that it works?

  2. Is your page long enough to scroll? (do you have enough filler content in there?)

  3. You posted three kinds of code in one code block. This isn’t really what you have, right? These are separate files? (Just making sure. If this is exactly the code you have, that’s a problem.)

  4. Do you know how to debug Javascript in your browser? If so, you want to find out where the script is dying. Is it missing the anchors? Or is location.pathname never equal to this.pathname?
    Do you ever have a valid target?

If you don’t know how to use the debugger of whatever browser you’re using, you should learn how but in the meantime you can do “poor man’s debugging” where you add console.log statements at each step (like, after var target… do a console.log(target) and see if it’s undefined).

3

1.) I have added the jquery library onto my website and no luck. I even tried grabbing the snippet at developers.google.com/speed/libraries/devguide#jquery to make sure I am fetching the library

2.) Yes

3.) Uhmm no. The CSS & JS are separated into a different file. I made a fiddle of my project but it seems to be behaving badly. http://jsfiddle.net/or5o94a5/

4.) The anchors are not missing to be honest. When I click on the link it seems to be going to the specified ID but with no transition

4

The problem isn’t the JS, but the CSS. Notice that you can’t scroll the page even with a mouse. Remove the 100% heights, the overflow on body, html etc. and you’ll see that the script works.

5

I added the 100% height and overflow:hidden on purpose to make it look like a one page scroll site hiding the scroll bar. The reason why I’m doing is because one part of the page will have a inner scroll bar. So If removed the overflow:hidden it will have a double scroll bar. What I’m planning to do basically is if the user clicks on the any of the links it will slide down to the specific div or part of the page.

Here is the website that I’m planning to implement the feature http://digitalspin.ph/test/munla/ this is just a test site. If you go to the menu page you will see it has a scroll bar inside the div. So like I said if I remove the overflow:hidden will display a double scroll bar