javascript - Creating a scrolling page without a plug-in. No scroll effect -

i'm trying create 1 page scrolling site without using plugin. following tutorial https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2 links work there no scrolling effect, jumps section.

js

$('a[href^="#"]').on('click', function(event) { var target = $(this.getattribute('href')); if( target.length ) {     event.preventdefault();     $('html, body').stop().animate({         scrolltop: target.offset().top     }, 1000); } }); 

html (updated remove errors)

<div id="container">  <div class="banner"> <a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a> </div>  <div id="page1"> <a id="welcome"></a> <h1></h1>  <div id="welcome_squares">  <div class="quarter-column">     <h3></h3>         <p></p> </div>  <div class="quarter-column">     <a href="#info">         <div class="welcome_square">             <img src="/pageassets/" alt="" />         </div>     </a> </div>  <div class="quarter-column">     <a href="#events">         <div class="welcome_square">             <img src="/pageassets/" alt="" />         </div>     </a> </div>  <div class="quarter-column">     <a href="#contact">         <div class="welcome_square">             <img src="/pageassets/" alt="" />         </div>     </a> </div>  </div> </div>  <div class="full-column" id="tiles"> <a id="info"></a> //content </div>  <div class="full-column" id="tiles"> <a id="events"></a> //content </div>  <div id="contact"> <a id="contact"></a> </div>  </div> 

hey here's fiddle working.

https://jsfiddle.net/fj1dfcsr/2/

errors i've encountered.

<div id="container">      <div class="banner">     <a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>     </div>      <div id="page1">     <a id="welcome" href="#"></a>     <h1></h1>      <div id="welcome_squares">      <div class="quarter-column">         <h3></h3>             <p></p>     </div>      <div class="quarter-column">         <a href="#info">             <div class="welcome_square">                 <img src="/pageassets/" alt="" />             </div>         </a>     </div>      <div class="quarter-column">         <a href="#events">             <div class="welcome_square">                 <img src="/pageassets/" alt="" />             </div>         </a>     </div>      <div class="quarter-column">         <a href="#contact">             <div class="welcome_square">                 <img src="/pageassets/" alt="" />             </div>         </a>     </div>      </div>     </div>      <div class="full-column" id="tiles">     <a id="info" href="#">info</a> //here, have used </div> instead of </a>     </div>      <div class="full-column" id="tiles">     <a id="events" href="#"></a> //here also, have used </div> instead of </a>     </div>      <div id="contact">     <a href="#" id="contact"></a>     </div>      </div> 

few things should keep in mind calling particular div id know.

for example

<div id="home"></div>

then you'll have use <a href="#home">home</a>

not <a id="#home"> home </a> //wrong way