smooth scrolling with pure javascript

1

I'm studying pure javascript to get a little out of jquery so I'm trying to recreate simple functions that I use in everyday life, and one of them is the smoothing of scroll but n found nothing referent on the internet someone knows how to soften the % only with pure javascript ? Thank you in advance.

    
asked by anonymous 08.04.2018 / 15:09

1 answer

0

Here are a few simple examples with pure JS. It does not have jQuery.

Example Soft inner scrolling with anchors only

var smoothScroll = {

  move : function (old, des, actual) {
    easeInOutQuart = function (t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; };
    actual += 1;
    ease = easeInOutQuart(actual / 100);
    delta = des - old;
    delta *= ease;
    delta += old;
    window.scrollTo(0, delta);
    if (actual < 100) {
      window.requestAnimationFrame(function () {
        smoothScroll.move(old, des, actual);
      });
    }
  },

  linkInit : function (e) {
    e.preventDefault();
    link = e.target.getAttribute("href").substr(1);
    block = document.getElementById(link).offsetTop;
    client = document.documentElement.scrollTop;

    smoothScroll.move(client, block, 0);
  },

  init : function () {
    links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      link = links[i].getAttribute("href");
      if (link.search("#") == 0 & link.substr(1) != "") {
        links[i].onclick = smoothScroll.linkInit;
      }
    }
  }
};

window.onload = smoothScroll.init;
header {
  position: fixed;
  top: 0;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  height: 3vw;
  line-height: 3vw;
}
header nav ul {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin: 0px auto;
}
header nav ul li {
  list-style: none;
}
header nav ul li a {
  color: black;
  text-decoration: none;
}

.content {
  margin-top: 3vw;
}
.content .block {
  height: 100vh;
  width: 100vw;
  border: 1px solid black;
}
<header>
  <nav>
    <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
    </ul>
  </nav>
</header>

<div class="content">
  <div id="one" class="block"></div>
  <div id="two" class="block"></div>
  <div id="three" class="block"></div>
</div>

Source: link

Soft Back to Top Example with Pure JS

function getId(e){return document.getElementById(e)}
function showHideBackToTop() {
  var toTop_button = getId("scrollToTop-button");
  var scroll_position = window.pageYOffset;
  if(scroll_position>1000) {
    toTop_button.className = "";
  }
  else{
    toTop_button.className = "unvisible";
  }
}
window.addEventListener("scroll", showHideBackToTop);

function scrollToTop(){
  showHideBackToTop();
  window.scrollBy(0,-200);
  var s_position = window.pageYOffset;
  if(s_position >= 1) {
    setTimeout(scrollToTop, 10);
  }
}
#container {
  position:relative;
}

#header {
  background:#333;
  color:#a7a7a7;
  font-weight:bold;
  font-size:25px;
  padding:30px 30px;
  text-align:center;
}

#content {
  max-width:640px;;margin:20px auto;
  font-size:20px;
  line-height:28px;
  text-align:justify;
  font-family:Cambria,serif;
  font-style:italic;
}

#scrollToTop-button {
  text-decoration:none;
  position:fixed;
  bottom:40px;
  right:40px;
  background:#333;
  color:#a7a7a7;
  width:50px;
  height:50px;
  line-height:50px;
  text-align:center;
  border-radius:100%;
  transition:opacity 1s;
}

.unvisible {
  opacity:0;
}
<div id='container'>
  <div id='header'>
  BACK TO TOP
  </div>
  <div id="content">
Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>
Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>

</div>
  <a id='scrollToTop-button' class='unvisible' href='javascript:void(0)' onclick='scrollToTop()'>TOP</a>
</div>

Source: link

a>

    
08.04.2018 / 16:11