使用纯 JAVASCRIPT 滚动到网站的顶部链接（jquery）

Question

I want normal scroll to top for website.

The scroll to top link appears at the bottom of page(near footer) which only visible after 200px mouse scroll down and should be hidden when scroll back to top. WITHOUT JQUERY

Here is the demo

In this demo back to top is already at the bottom. Is there any way to show back to top link fixed as I mention above?

Answer 1

if you want it as simple as possible, just use:

<a href="#" onClick="window.scrollTo(0,0)">

this will scroll you to the top of your site.

Answer 2

Here is the answer

HTML

<a id="scroll_to_top_id"></a>

CSS

#scroll_to_top_id {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background
}

PURE JAVASCRIPT(NO JQUERY)

/*
 *  Scroll To Top
 */

var your_header        = document.getElementById('header_id'),
    scroll_to_top   = document.getElementById('scroll_to_top_id');


window.onscroll = function(ev) {

    var  scrollTop = window.pageYOffset || document.body.scrollTop;
    if (scrollTop > your_header.offsetHeight + 100) {

        scroll_to_top.style.display = 'block';
    }
    else{
        scroll_to_top.style.display = 'none';   
    }
};

scroll_to_top.onclick = function () {
    scrollTo(document.body, 0, 100);
}

/*
 *  scroll to body top
 *  element, position and time duration
 */
function scrollTo(element, to, duration) {
        if (duration < 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}

Answer 3

For this case, the MDN docs leave an awesome solution, we can now use the following example:

const el = document.getElementById('the-scroll-box');

el.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth', // or can get `auto` variable
});

The behavior if have smooth value, the scrolling motion is smooth if have auto value the motion happen in one jump.