Suddenly, the "up" button was needed. Googled, found code on jsfiddle, checked - it works:

I copied it to my site, but the animation does not work on my site. Instead of .fadeIn() and fadeOut() , the element just appears and disappears abruptly, and .animate({scrollTop : 0},800) does not animate a smooth scroll up, but just immediately throws it sharply to the top without animation. Any suggestions? Perhaps I missed something?

UPD: the button is at the end of the page before the scripts. I made the appearance and disappearance animation using css, but the scrollTop still does not play the animation, but abruptly throws it up.

UDP2:

 $(document).ready(function() { //Check to see if the window is top if not then display button $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.scrollToTop').addClass('visible'); } else { $('.scrollToTop').removeClass('visible'); } }); //Click event to scroll to top $('.scrollToTop').click(function() { $('html, body').animate({ scrollTop: 0 }, 800); return false; }); }); 
 body { height: 800px; width: 500px; } .scroll-to-top { position: fixed; bottom: 50px; right: 45px; width: 48px; height: 48px; opacity: 0; z-index: -1; visibility: hidden; pointer-events: none; background-color: #039be5; background-image: linear-gradient(-180deg, #039be5 0%, #0288d1 90%); border-radius: 50%; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); transition: all .4s ease; } .scroll-to-top.visible { opacity: 1; z-index: 999; visibility: visible; pointer-events: auto; } .scroll-to-top>i { color: #fff; font-size: 34px; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <a href="#" class="scroll-to-top"> <i class="material-icons">keyboard_arrow_up</i> </a>

  • Add html and css of the element and its environment to the condition. Css options, such as, for example, "transition" used to break the jquery animation. - n3r0bi0m4n
  • @ n3r0bi0m4n updated the question - JamesJGoodwin

2 answers 2

Listen I am not strong in JQ, I just don’t write on it ... here’s an example on pure JS

 var scrollingUp; var timer; var scroll_to_top = document.querySelector('.scroll-to-top') document.addEventListener('scroll', function() { if (window.pageYOffset >= 100) { scroll_to_top.classList.add('visible') } else { scroll_to_top.classList.remove('visible') } }) scroll_to_top.addEventListener('click', function() { scrollingUp = window.pageYOffset; winScrollUp(); }) function winScrollUp() { if (scrollingUp > 0) { window.scrollTo(0, scrollingUp); scrollingUp = scrollingUp - 10; timer = setTimeout(winScrollUp, 1) } else { clearTimeout(timer); window.scrollTo(0, 0); } } 
 html, body { height: 150%; width: 100%; } .scroll-to-top { position: fixed; bottom: 50px; right: 45px; width: 48px; height: 48px; opacity: 0; z-index: -1; visibility: hidden; pointer-events: none; background-color: #039be5; background-image: url('http://s1.iconbird.com/ico/2013/10/464/w512h5121380984855up.png'); background-size: cover; border-radius: 50%; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); transition: all .4s ease; } .scroll-to-top.visible { opacity: 1; z-index: 999; visibility: visible; pointer-events: auto; } 
 <div class="scroll-to-top"></div>

  • Didn't work ... - JamesJGoodwin
  • well then add both html and css - Air
  • Still does not work - JamesJGoodwin
  • You did not understand, add html and css here, so that the example would be clear, and not just JS - Air
  • Added a snippet to the question - JamesJGoodwin

The jQuery Easing module was connected, which blocked all the jQuery animation.