我有下面的代码，我一直试图在香草javascript中进行转换。任何指针？转换jquery为香草javascript
$(".className").click(() => {
$(".modal").animate({ scrollTop: 0 }, "normal");
return false;
});
这是我到目前为止已经通过点击得到。我认为它工作正常，但动画仍然在jQuery
document.getElementById("topBtn").onclick =() => {
$(".modal").animate({ scrollTop: 0 }, "normal");
return false;
};
动画，没有1对1的转换，它实际上是它自己的库。还有很多其他动画库可以用来替代，或者您可以自己编写。
也有web animations，这可能会做你想做的，但他们没有得到广泛的支持。
你需要做一些运动，但是我会通过给你一些等价的东西来查找。
document.getElementsByClassName("className") = $(".className")
.addEventListener('event', function(){ /*some code*/ }) = .click(function { /*some code*/ });
对于动画部分，事情会变得有点棘手。您可以使用滚动
window.scrollTo(xpos,ypos)
但是此方法将立即滚动并且不会动画。没有一种非常简洁的方式来将animate转换为像其他JavaScript一样的JavaScript。如果有人想在评论中增加一种方式，请随意。
我从这个post得到JS scrollTo()函数。
该动画利用setTimeout以及<body>和顶部之间的缩小距离。
如果您只是想找到一个元素，并且您知道它是页面上唯一的元素，只需使用querySelector()即可。
要查看代码段，请使用“整页”按钮。
片段
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>我做这在我的网站。使用requestAnimationFrame来处理滚动顶部动画。
这是一个关于 Optimize JavaScript Execution谷歌开发人员的主题。
...当谈到动画时，需要考虑许多性能问题。 Mayby使用动画框架并不是一个坏主意。
const topBtn = document.getElementById("topBtn");
const downBtn = document.getElementById("downBtn");
window.requestAnimationFrame = window.requestAnimationFrame
\t \t \t || window.mozRequestAnimationFrame
\t \t \t || window.webkitRequestAnimationFrame
\t \t \t || window.msRequestAnimationFrame;
topBtn.addEventListener('click', handleTopClick);
downBtn.addEventListener('click', handleDownClick);
function handleDownClick(){
const currentPos = window.pageYOffset;
window.requestAnimationFrame(() => {
\t scroll(currentPos, 1000, 20);
\t });
}
function handleTopClick(){
const currentPos = window.pageYOffset;
window.requestAnimationFrame(() => {
\t scroll(currentPos, 0, -20);
\t });
}
// 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;
\t window.requestAnimationFrame(() => {
\t 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>
你有没有尝试自己做什么？ – hindmost
是的，我已经开始点击转换，但这是我得到的：document.getElementsByClassName（'。className'）。onclick = function（）{ – Farrugia
显而易见的重现jquery的东西是看它的[sources]（ https://github.com/jquery/jquery/blob/master/src/effects.js） – hindmost