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
– Farrugia, Commented Feb 23, 2016 at 8:30
Obvious point to reproduce jquery's stuff is look at its sources — hindmost
– hindmost, Commented Feb 23, 2016 at 8:38

AppleJam · Accepted Answer · 2017-03-16 21:37:56Z

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>

Matt Styles · Accepted Answer · 2016-02-23 08:38:44Z

0

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.

answered Feb 23, 2016 at 8:38

Matt Styles

2,4621 gold badge19 silver badges23 bronze badges

Comments

Luke Pirtle · Accepted Answer · 2016-02-23 08:54:07Z

0

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.

answered Feb 23, 2016 at 8:54

Luke Pirtle

322 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:16Z

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>

Collectives™ on Stack Overflow

Converting jquery to vanilla javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related