Cross Browser JavaScript (Not Jquery...) Scroll to Top Animation

jQuery cross-browser scroll to top , with animation

You're returning true from the click function, so it won't prevent the default browser behaviour (i.e. navigating to thego-to-top anchor. As Mark has said, use:

$('html,body').animate({ scrollTop: 0 }, 'slow');

So your code should now look like:

$('#go-to-top').each(function(){
    $(this).click(function(){ 
        $('html,body').animate({ scrollTop: 0 }, 'slow');
        return false; 
    });
});

jQuery animate scrollTop not working in IE 7

EDIT As pointed out by many, it is better to use:

$('body, html').animate({scrollTop : 0}, 0);

How to animate scrolling to top of page using javascript (no jQuery)?

You can use below code to move the top of the page.

// When the user scrolls down 20px from the top of the document, show the buttonwindow.onscroll = function() {  scrollFunction()};
function scrollFunction() {  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {    document.getElementById("myBtn").style.display = "block";  } else {    document.getElementById("myBtn").style.display = "none";  }}
// When the user clicks on the button, scroll to the top of the documentfunction topFunction() {  document.body.scrollTop = 0;  document.documentElement.scrollTop = 0;}

body {  font-family: Arial, Helvetica, sans-serif;  font-size: 20px;  background: #ffffff;}
#myBtn {  display: none;  position: fixed;  bottom: 20px;  right: 30px;  z-index: 99;  background-color: red;  color: white;  cursor: pointer;  padding: 15px;  border-radius: 4px;}
#myBtn:hover {  background-color: #555;}

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button><div style="padding:30px">Scroll Down</div><div style="padding:30px 30px 700px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Scroll to the top of the page using JavaScript?

If you don't need the change to animate then you don't need to use any special plugins - I'd just use the native JavaScript window.scrollTo() method -- passing in 0, 0 will scroll the page to the top left instantly.

window.scrollTo(xCoord, yCoord);

Parameters

• xCoord is the pixel along the horizontal axis.
• yCoord is the pixel along the vertical axis.

cross browser version of my scroll to top button with animation

Can you try this because this will work as I am using this code to scroll the page to top using JavaScript. I have modified your code like below:

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

var x;
function topFunction() {
    if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        x=setTimeout('topFunction()',10);
    }
    else clearTimeout(x);
}

Crossbrowser solution for disable/enable scroll

I don`t understand this:

if( $(window).scrollTop() < $(window).height() * 6 )

this will be true until you pass the six slide...

UPDATED: If you want to stop triggering the animation while it is running you can just delete the stop(). Then if you don't want to enqueue animations(and then get strange behaviors), you can just call clearQueue() when the animation has finished.

var divs = $('.section'); var dir = 'up'; // wheel scroll directionvar div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) { if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {   dir = 'down';  }   else {   dir = 'up';  }    // find currently visible div :  div = -1;  divs.each(function(i){   if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {    div = i;   } });    if (dir == 'up' && div > 0) {   div--;  }  if (dir == 'down' && div < divs.length) {   div++;  }     $('html,body').animate({   scrollTop: divs.eq(div).offset().top  }, 1600, function() {  $('html,body').clearQueue(); });        return false;});
$(window).resize(function () { $('html,body').scrollTop(divs.eq(div).offset().top);});

.section {  height: 100vh;}body{  margin: 0px !important;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="section" style="background: yellow;"></div><div class="section" style="background: green;"></div><div class="section" style="background: blue;"></div><div class="section" style="background: red;"></div><div class="section" style="background: violet;"></div><div class="section" style="background: orange;"></div><div class="section" style="background: black;"></div>

---

Related Topics