跨瀏覽器版本的「我的」滾動到頂部按鈕與動畫

我目前正在使用一個按鈕，當點擊時調用一個功能，滾動到頁面的頂部。它在谷歌瀏覽器中完美工作，但不能在Internet Explorer中使用。在IE中，它在沒有動畫的情況下進入頂部，然後停止滾動功能。我不希望發生這種情況。我是否犯了一個谷歌不能注意到的錯誤和IE可以？跨瀏覽器版本的「我的」滾動到頂部按鈕與動畫

我對jQuery沒有經驗，所以想要一個純粹的javascript解決方案。 Pleeeez嘗試先改善我的計劃。如果不可能，那麼只能給一個不同但純粹的JavaScript解決方案。下面是程序：

window.onscroll = function() { 
 
    scrollFunction() 
 
}; 
 

 
function scrollFunction() { 
 
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { 
 
    document.getElementById("myBtn").style.display = "block"; 
 
    } else { 
 
    document.getElementById("myBtn").style.display = "none"; 
 
    } 
 
} 
 

 
function topFunction() { 
 
    if (window.scrollY != 0) { 
 
    setTimeout(function() { 
 
     window.scrollTo(0, window.scrollY - 30); 
 
     topFunction(); 
 
    }, 5); 
 
    } 
 
}

#myBtn { 
 
    text-align: center; 
 
    opacity: 0.7; 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Fixed/sticky position */ 
 
    bottom: 5px; 
 
    /* Place the button at the bottom of the page */ 
 
    right: 5px; 
 
    /* Place the button 30px from the right */ 
 
    z-index: 2; 
 
    /* Make sure it does not overlap */ 
 
    border: none; 
 
    /* Remove borders */ 
 
    outline: none; 
 
    /* Remove outline */ 
 
    background-color: green; 
 
    /* Set a background color */ 
 
    color: white; 
 
    /* Text color */ 
 
    border-radius: 9px 9px 0 0; 
 
    cursor: pointer; 
 
    /* Add a mouse pointer on hover */ 
 
    padding: 15px 20px 40px; 
 
    height: 9px; 
 
} 
 

 
#myBtn:hover { 
 
    opacity: 1;

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
    <h1>Heading</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
 
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
 
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
 
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
 
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
 
    officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum 
 
    dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
 
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
 
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
 
    anim id est laborum.</p> 
 
    <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-chevron-up custom" ></i></button> 
 
</body> 
 

 
</html>

來源

2017-06-15 Imad Farooque

你可以試試這個，因爲這將作爲我使用這個代碼，以滾動頁面使用JavaScript來頂工作。我已經修改了你的代碼象下面這樣：

window.onscroll = function() { 
    scrollFunction() 
}; 

function scrollFunction() { 
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { 
    document.getElementById("myBtn").style.display = "block"; 
    } else { 
    document.getElementById("myBtn").style.display = "none"; 
    } 
} 

var x; 
function topFunction() { 
    if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){ 
     window.scrollBy(0,-50); 
     x=setTimeout('topFunction()',10); 
    } 
    else clearTimeout(x); 
}

來源

2017-06-15 08:28:32 Archana

非常感謝你！現在它也在IE上工作 –

歡迎:)是的，它適用於所有瀏覽器。 – Archana

使用在你的頭上html5shivjs，這個庫的幫助，你將能夠支持在舊的瀏覽器HTML5非標準.Simply這個CDN添加到您的鏈接在頭上腳本標籤https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js

來源

2017-06-15 09:58:44 Levon

跨瀏覽器版本的「我的」滾動到頂部按鈕與動畫

回答

相關問題