2

I have a scroll to top button on my page, but when I click it, it doesnt scroll to top, it just takes me directly to the top, like as if I loaded a new page, but what I need is the scrolling animation.

javascript

window.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 document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

css

#myBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  border: teal;
  outline: none;
  background-color: #FF6347;
  color: white;
  cursor: pointer;
  padding: 0px;
  border-radius: 100px;
  width: 40px;
  height: 40px;
}

#myBtn i {
  width: 40px;
  height: 40px;
  text-align: center;
  z-index: 100;
  line-height: 40px;
  color: white;
}

#myBtn:hover {
  background-color: #FF6320;
}

html

<button1 onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button1>
  • 1
    You are missing the animation process within the scrolltop function. Right now it just jumps up as the function is supposed to do. Apply an animation to it that adds that. – Dorvalla Jul 20 '17 at 15:14
  • If you use jQuery: https://stackoverflow.com/questions/16475198/jquery-scrolltop-animation#16475234 – Sumner Evans Jul 20 '17 at 15:19
  • 1
    Possible duplicate of https://stackoverflow.com/questions/17733076/smooth-scroll-anchor-links-without-jquery Which might be the solution you want to know. – Markus Jul 20 '17 at 15:13
  • @Markus that question is vague, and is open to any answers and not specifically JavaScript, well i have been through that question and others before, and haven't found what i'm looking for, hence why i provided my code, in relation to my specific question. Thank you –  Jul 20 '17 at 17:34
  • @SumnerEvans i have never touched jquery before –  Jul 20 '17 at 17:36
  • I did something similar on my website: https://github.com/SummationTech/summationtech-website/blob/master/resources/js/app.js#L67. In your case, you would want to just use 0 instead of `scrollLocation`. That requires jQuery (see http://jquery.com/download/ for how to include it in your project). – Sumner Evans Jul 20 '17 at 17:45
  • i would like to not use jquery, –  Jul 20 '17 at 17:56

1 Answers1

0

Your topFunction() makes a jump to the top of the page. What you actually want is multiple jumps, e.g., going up 20px. And, for it to not occur too fast, add a timeout. I altered your code to make a working example.

Although I would recommend operating with the container div instead of checking for (document.body.scrollTop > step || document.documentElement.scrollTop > step). Setting the element and working with element.scrollTop would be cleaner ( and safer for different browsers ) .

var step = 20;

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

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

}

function topFunction() {
  if (document.body.scrollTop > step || document.documentElement.scrollTop > step) {
    document.body.scrollTop -= step
    document.documentElement.scrollTop -= step
    setTimeout(function() {
      topFunction()
    }, step)
  } else {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  }
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99;
  border: teal;
  outline: none;
  background-color: #FF6347;
  color: white;
  cursor: pointer;
  padding: 0px;
  border-radius: 100px;
  width: 40px;
  height: 40px;
}

#myBtn i {
  width: 40px;
  height: 40px;
  text-align: center;
  z-index: 100;
  line-height: 40px;
  color: white;
}

#myBtn:hover {
  background-color: #FF6320;
}
<div style="width:100px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-angle-double-up" aria-hidden="true"></i></button>
</div>
kravis
  • 380
  • 2
  • 15