Converting jquery to vanilla javascript

Question

I have the following code and I've been trying to convert it in vanilla javascript. Any pointers please ?

 $(".className").click(() => {
                $(".modal").animate({ scrollTop: 0 }, "normal");
                return false;
            });

This is where I've gotten so far by the click. I think it's working fine but the animate is still in jquery

document.getElementById("topBtn").onclick = () => {
                $(".modal").animate({ scrollTop: 0 }, "normal");
                return false;
            };

Yes I've started with the click conversion but this is as far as I got: document.getElementsByClassName('.className').onclick = function () { — Farrugia, Feb 23 '16 at 08:30
Obvious point to reproduce jquery's stuff is look at its [sources](https://github.com/jquery/jquery/blob/master/src/effects.js) — hindmost, Feb 23 '16 at 08:38

AppleJam · Answer 1 · 2017-03-16T21:37:56.880

I do this on my website. Use requestAnimationFrame to deal with scrolling top animation.

Here is a topic about Optimize JavaScript Execution from google developers.

... when it comes to animation, there are many performance issues to consider. Mayby using animation framework is not a bad idea.

const topBtn =  document.getElementById("topBtn");
const downBtn =  document.getElementById("downBtn");

   
window.requestAnimationFrame = window.requestAnimationFrame
   || window.mozRequestAnimationFrame
   || window.webkitRequestAnimationFrame
   || window.msRequestAnimationFrame;
    
   
topBtn.addEventListener('click', handleTopClick);
downBtn.addEventListener('click', handleDownClick);
function handleDownClick(){
    const currentPos = window.pageYOffset;
    window.requestAnimationFrame(() => {
    scroll(currentPos, 1000, 20); 
 });
}
function handleTopClick(){
    const currentPos = window.pageYOffset;
    window.requestAnimationFrame(() => {
    scroll(currentPos, 0, -20); 
 });
}
// recursive function to scroll 
function scroll(currentPos, targetPos, scrollOffset){
    const distance = currentPos - targetPos;
    const absDistance = Math.abs(distance);
    if (absDistance < scrollOffset) {
      if(absDistance > 0) {
        document.body.scrollTop -= distance;
      }
      return;
    }
    document.body.scrollTop = currentPos + scrollOffset;
 window.requestAnimationFrame(() => {
   scroll(currentPos + scrollOffset, targetPos, scrollOffset);
    }); 
}

#modal{
  height:1000px;
  background-color:black;
  position:relative;
}
#downBtn{
  position:absolute;
  top:0;
  left:50%;
  font-size:1rem;
}
#topBtn{
  position:absolute;
  bottom:0;
  left:50%;
  font-size:1rem;
}

<div id="modal">
  <button id="downBtn">down</button>
     <button id="topBtn">top</button>
</div>

score 0 · Answer 2 · answered Feb 23 '16 at 08:38

There is no 1-to-1 conversion for animate, it is in effect its own library. There are plenty of other animation libraries you could use instead, or you could write your own.

There are also web animations, which would probably do what you want, but they are not widely supported.

score 0 · Answer 3 · answered Feb 23 '16 at 08:54

You'll need to do some legwork but I'll throw you a bone by giving you some equivalences/things to lookup.

document.getElementsByClassName("className") = $(".className")

.addEventListener('event', function(){ /*some code*/ }) = .click(function { /*some code*/ });

For the animate part, things get a little trickier. You can scroll using

window.scrollTo(xpos,ypos)

This method will scroll instantly however and won't animate. There isn't a very concise manner to convert animate to JavaScript like these others. If anyone would like to add a way in the comments feel free.

score 0 · Answer 4 · edited May 23 '17 at 12:25

I got the JS scrollTo() function from this post.

The animation utilizes setTimeout and the shrinking distance between the <body> and the top.

If you are just trying to find an element and you know it's the only one on the page, just use querySelector().

To review snippet, please use the "Full page" button.

Snippet

var btn1 = document.querySelector('.className');

btn1.addEventListener('click', function(e) {
  scrollTo(document.body, 0, 1000);
});

function scrollTo(ele, to, time) {
  if (time <= 0) return;
  var diff = to - ele.scrollTop;
  var per = diff / time * 10;

  setTimeout(function() {
    ele.scrollTop = ele.scrollTop + per;
    if (ele.scrollTop === to) return;
    scrollTo(ele, to, time - 10);
  }, 10);
}

body {
  position: relative;
  height: 100%;
  overflow: scroll;
}

<h1>This is the Top</h1>
<p class="instructions">Scroll down to the bottom and click the button</p>


<section>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
</section>
<button class="className"><a>Top </a></button>

Converting jquery to vanilla javascript

4 Answers4