跨浏览器版本的“我的”滚动到顶部按钮与动画

我目前正在使用一个按钮，当点击时调用一个功能，滚动到页面的顶部。它在谷歌浏览器中完美工作，但不能在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

跨浏览器版本的“我的”滚动到顶部按钮与动画

回答

相关问题