Scroll to Section with Animation

Nowadays I noticed that most of newer website have those feature that when you clicked a link, and then it scroll to the particular section of the page. Here’s my own simple version how to do scroll to section.

HTML

<a href="#el1" class="click">Click this to scroll to element 1!</a><br />
<a href="#el2" class="click">Click this to scroll to element 2!</a><br />
<a href="#el3" class="click">Click this to scroll to element 3!</a><br />

<section id="el1">element 1</section>
<section id="el2">element 2</section>
<section id="el3">element 3</section>

JS

var scrollTo = {

 init : function () {
   this.button();
 },

 button : function () {
   $('.click').click(function(e){
     // prevent default action
     e.preventDefault();
     var target = $(this).attr('href');
 
     // get id of target div (placed in href attribute of anchor element)
     // and pass it to the scrollToElement function
     // also, use 2000 as an argument for the scroll speed (2 seconds, 2000 milliseconds)
     scrollTo.element( target, 2000 );
   });
 },

 element : function (el, ms) {
   var speed = (ms) ? ms : 600;
   $('html,body').animate({
     scrollTop: $(el).offset().top
   }, speed);
 }

}

scrollTo.init();

CSS

div {
  margin-top:1000px;
}
div:last-child {
  padding-bottom:1000px;
}

Detect Location Bottom using jQuery

$(window).scroll(function() {

  var documentHeight = $(document).height();
  var scrollValue    = $(window).scrollTop();
  var targetBottom   = 1414;

  console.clear();
  console.log(scrollValue + window.innerHeight);
  console.log('default: ' + documentHeight);
  console.log('target : ' + (documentHeight - targetBottom) );

  if (scrollValue + window.innerHeight >= (documentHeight - targetBottom) ) {
    console.log("You are inside of the target bottom");
  }

});

Adding ID in list of Class

Here’s how to add ID in your list of class using jQuery

HTML

<div class="slide">hello</div>
<div class="slide">hello</div>
<div class="slide">hello</div>

JS

$(document).ready(function() {
  $(".slide").each(function(i) {
    $(this).attr('id', "slide" + (i + 1));
  });
});

CSS

#slide1,
#slide2,
#slide3 {
  height: 200px;
  width: 200px;
  border: solid red solid; 
}

Add ascending numbers to ID

Here’s how to dynamically append a new data using input field.

HTML

<form id="create_menu_item">
 <h4>Add Menu Item</h4>
 <div>
   <input id="new_menu_name" type="text" name="new_menu_name" placeholder="Please enter your menu title" />
   <input class="add_menu_item" name="add_menu_item" value="Add" type="button" />
 </div>
 <h4>Menu Items</h4>
 <div id="created_buttons">
   <ol id="created_buttons_list"> </ol>
 </div>
</form>

JS

$(".add_menu_item").click((function() {
 var id = 0;
 return function() {
   var value = $(this).prev().val();
   if (value.length) {
     var newDiv = $('<div id="toggleshow" class="div_menu_button"></div>');
     $('#created_buttons_list').append(newDiv.val(value).text(value));
     newDiv.wrap("<li></li>");
     newDiv.after(showDiv);
     id++;
   }
 }
})());