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;
};
4 answers
solution1
1 2017-03-16 21:08:44
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>
solution2
0 2016-02-23 08:38:44
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.
solution3
0 2016-02-23 08:54:07
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.
solution4
0 2016-02-23 09:07:11
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.