将jquery转换为香草javascript

Question

我有以下代码，并且我一直在尝试将其转换为原始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开发人员的有关优化JavaScript执行的主题。

...关于动画，有许多性能问题需要考虑。 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

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

也有网络动画，它可能会做您想要的事情，但并未得到广泛支持。

Answer 3

您需要做一些腿部工作，但我会通过给您一些等效项/事物来给您扔骨头。

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

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

对于动画部分，事情变得有些棘手。 您可以使用滚动

window.scrollTo(xpos,ypos)

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

Answer 4

我从这篇文章中得到了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转换为香草javascript

问题描述

4 个解决方案

解决方案1
1 2017-03-16 21:08:44

解决方案2
0 2016-02-23 08:38:44

解决方案3
0 2016-02-23 08:54:07

解决方案4
0 2016-02-23 09:07:11

将jquery转换为香草javascript

问题描述

4 个解决方案

解决方案1 1 2017-03-16 21:08:44

解决方案2 0 2016-02-23 08:38:44

解决方案3 0 2016-02-23 08:54:07

解决方案4 0 2016-02-23 09:07:11

解决方案1
1 2017-03-16 21:08:44

解决方案2
0 2016-02-23 08:38:44

解决方案3
0 2016-02-23 08:54:07

解决方案4
0 2016-02-23 09:07:11