將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