Saturday, November 28, 2015

on page scroll go to top using jquery



Step : 1 HTML
    

    
    
Step : 2 CSS
.back-to-top{
  position: fixed;
  bottom:0px;
  right: 0px;
  text-decoration: none;
  color: #FFF;
  background-color:#0e66ae;
  padding:7px 7px;
  display: none;
  margin:0 30px 20px 0;
  z-index: 999;
  border-radius: 3px;
}

.back-to-top:hover {
  color: #eb5718
}

.back-to-top:focus{color: #eb5718;}
Step : 3Download jquery library file and link inside head section.
Step : 4 jquery
$(document).ready(function() {

    var offset = 220;
    var duration = 500;

    $(window).scroll(function() {
        if ($(this).scrollTop() > offset) {
            $('.back-to-top').fadeIn(duration);
        } else {
            $('.back-to-top').fadeOut(duration);
        }
    });
    
    $('.back-to-top').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});

No comments:

Post a Comment

Copyright © www.sureshsharma.info All rights reserved