轉換jquery爲香草javascript

我有下面的代碼，我一直試圖在香草javascript中進行轉換。任何指針？轉換jquery爲香草javascript

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

這是我到目前爲止已經通過點擊得到。我認爲它工作正常，但動畫仍然在jQuery

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

來源

2016-02-23 Farrugia

你有沒有嘗試自己做什麼？ – hindmost

是的，我已經開始點擊轉換，但這是我得到的：document.getElementsByClassName（'。className'）。onclick = function（）{ – Farrugia

顯而易見的重現jquery的東西是看它的[sources]（ https://github.com/jquery/jquery/blob/master/src/effects.js） – hindmost

動畫，沒有1對1的轉換，它實際上是它自己的庫。還有很多其他動畫庫可以用來替代，或者您可以自己編寫。

也有web animations，這可能會做你想做的，但他們沒有得到廣泛的支持。

來源

2016-02-23 08:38:44

你需要做一些運動，但是我會通過給你一些等價的東西來查找。

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

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

對於動畫部分，事情會變得有點棘手。您可以使用滾動

window.scrollTo(xpos,ypos)

但是此方法將立即滾動並且不會動畫。沒有一種非常簡潔的方式來將animate轉換爲像其他JavaScript一樣的JavaScript。如果有人想在評論中增加一種方式，請隨意。

來源

2016-02-23 08:54:07

我從這個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>

來源

2016-02-23 09:07:11 zer00ne

我做這在我的網站。使用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>

來源

2017-03-16 21:08:44 AppleJam

轉換jquery爲香草javascript

回答

相關問題