CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Maniraj Murugan
Maniraj Murugan

Reputation: 9084

Smooth scroll to top not working

I am using the to top arrow in website to move to the top section with smooth scroll.. Now its moving to top but not moving in smooth..

The js that i used to get smooth scroll was 

$(function() {
  $('a.page-scroll').bind('click', function(event) {
    console.log("scroll");
    var $anchor = $(this);
  $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
  }, 1500, 'easeInOutExpo');
  event.preventDefault();
  });
});

BUt its not working.. The jsfiddle was https://jsfiddle.net/36m5kp00/

The jquery's that i have used was,

<script src="scripts/controllers/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Upvotes: 0

Views: 1392

Answers (2)

Ashish Kumar
Ashish Kumar

Reputation: 3039

Actually you need to add the jquery easing plugin if you want to use custom easing methods like easeInOutExpo.

Note: jQuery comes with 2 easing methods linear & swing. Reference here: https://api.jqueryui.com/easings/

Here you can get it from: https://cdnjs.com/libraries/jquery-easing

It works well, Check it here: https://jsfiddle.net/ashishanexpert/36m5kp00/4/

Your working code should be like:

$(window).scroll(function() {
  if ($(this).scrollTop()) {
    $('#letTop:hidden').stop(true, true).fadeIn();
  } else {
    $('#letTop').stop(true, true).fadeOut();
  }
});
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    console.log("scroll");
    var $anchor = $(this);
  $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
  }, 1500, 'easeInOutExpo');
  event.preventDefault();
  });
});

Upvotes: 1

Ankit Singh
Ankit Singh

Reputation: 1477

Use this

$(function() {
  $('a.page-scroll').bind('click', function(event) {
    $("html, body").animate({ scrollTop: 0 }, 1500);
    event.preventDefault();
  });
});

Upvotes: 3

Related Questions