Tutorial No.1

Smooth Anchor Scroll

Let's create some fun vertical scroll buttons to control our anchor scroll and smooth it out.

  Use Buttons to Scroll

Creat HTML

  ‒ Time for Font-Awesome!

  • ♦  We'll choose font 'fa-circle' for simplicity
  • ♦  Let's make 4 of them becase we have four sections to go to
  • ♦  Give your target section an id of "block"+"number"
  • ♦  Put the id in the a tag so each dot represents one block
  • ♦  Now we have four dots on the page ready to be clicked on
  • ♦  When clicked, you'll be taken to the desired location instantly

Attach Stylesheet

  ‒ Style fonts and think about what we want to achieve

  • ♦  Before any jQuery happens, let's make sure .js file is properly linked
  • ♦  Remember our goal: to get to an anchored location with a smooth scroll
  • ♦  Let's break it down: for example, when dot #3 is clicked, we want to tell scrollbar to scroll to #block3's top position. Now we are ready for codes

Some jQuery

  ‒ Important: Get the scrollbar position of an element when the corresponding dot is clicked

  • ♦  Call all the dots by selecting all hrefs containing the word 'block'
  • ♦  Use '.click()' to control what happens (hint: $().animate()) when dots are clicked
  • ♦  $(this).attr('href') gets the href value of the dot being clicked, e.g '#block3' when dot #3 is clicked
  • ♦  '.offset().top' gets the current top position of an element
  • ♦  'scrollTop:$('#x').offset().top will tell the scrollbar to go to x's top position
  • ♦  '.animate()' animates the scrollbar position change within element 'body' over 0.3 seconds