Question

我有以下代码，我一直在尝试使用vanilla javascript转换它。有什么指示吗？

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

这是我到目前为止点击的地方。我认为它工作正常，但动画仍在jquery

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

Answer 1

我在我的网站上这样做。使用requestAnimationFrame处理滚动顶部动画。

这是一个关于的话题来自Google开发者的Optimize JavaScript Execution。

...谈到动画时，需要考虑许多性能问题。使用动画框架的Mayby并不是一个坏主意。

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>

Answer 2

动画没有一对一的转换，它实际上是它自己的库。您可以使用许多其他动画库，或者您可以编写自己的动画库。

还有web animations，它可能会做你想要的，但它们没有得到广泛的支持。

Answer 3

你需要做一些腿部工作，但我会给你一些等同/事物来查找。

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

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

对于有生命的部分，事情变得有点棘手。您可以使用

滚动

window.scrollTo(xpos,ypos)

此方法会立即滚动，但不会动画。没有非常简洁的方式将动画转换为像其他人一样的JavaScript。如果有人想在评论中添加一种方式，请随意。

Answer 4

我从这个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>

将jquery转换为vanilla javascript

4 个答案: