Few Necessary jQuery and Javascript for Web site

0

//for menu-bg change

$ (window).on('scroll', function () {

if ($(window).scrollTop() >550){

$('#menu').addClass('menu-bg');

} else {

$('#menu') .removeClass('menu-bg');

}

});



//for Scroll to top 

HTML

<a href="#" class="scrollToTop">Scroll To Top</a>

CSS

.scrollToTop{
 width:100px; 
 height:130px;
 padding:10px; 
 text-align:center; 
 background: whiteSmoke;
 font-weight: bold;
 color: #444;
 text-decoration: none;
 position:fixed;
 top:75px;
 right:40px;
 display:none;
 background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
 text-decoration:none;
}

jQuery

$(document).ready(function(){
 
 //Check to see if the window is top if not then display button
 $(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
   $('.scrollToTop').fadeIn();
  } else {
   $('.scrollToTop').fadeOut();
  }
 });
 
 //Click event to scroll to top
 $('.scrollToTop').click(function(){
  $('html, body').animate({scrollTop : 0},800);
  return false;
 });
 
});




0 comments:

Subscribe to: Post Comments (Atom)