Question

我想添加一个按钮来滚动Chrome中的当前标签（在Facebook中），但是当我添加代码时，滚动图标不起作用，但是当我在w3school模拟器中尝试它时，它可以工作。

在我这样做之后，我怎么能这样做，每当我打开网站时它都会留下来？

代码

<html>
<head>
<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Scroll</button>


<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {

        document.getElementById("myBtn").style.display = "block";

}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
window.scrollBy(0,100);
}
</script>

</body>
</html>

Answer 1

我终于成功了！

我下载浏览器扩展程序 - Tampermonkey（它允许您在浏览器扩展程序等网站上运行JavaScript）

然后没有HTML / CSS只用JS我做了

以下是那些想要的代码（滚动到顶部）：

//scroll to top smooth scrolling
var button = document.createElement ("Button");
button.innerHTML = "Top";
button.style = "display: none;bottom: 0px;right:0;position:fixed;z-index: 9999;border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 10px";
document.body.appendChild(button);
window.onscroll = function() {scrollFunction();};

function scrollFunction() {
    if (document.body.scrollTop > 75 || document.documentElement.scrollTop > 75) {
        button.style.display = "block";
    } else {
        button.style.display = "none";
    }
}
button.onmouseover=function()
{
    button.style.backgroundColor="gray";
};
button.onmouseleave=function()
{
    button.style.backgroundColor="red";
};
var i;
button.onclick = function()
{
    if(scrollY<500)
        i=100;
    else if(scrollY<1000)
        i=125;
    else if(scrollY<1500)
        i=150;
    else if(scrollY<2000)
        i=175;
    else if(scrollY<2500)
        i=200;
    else if(scrollY<10000)
        i=((scrollY/2500)*100)+125;
    else
        i=((scrollY/5000)*100)+125;
    doScrolling(0,i);
};
function doScrolling(elementY, duration) { 
    var startingY = window.pageYOffset; 
    var diff = elementY - startingY;
    var start;

    // Bootstrap our animation - it will get called right before next frame shall be rendered.
    window.requestAnimationFrame(function step(timestamp) {
        if (!start) start = timestamp;
        // Elapsed miliseconds since start of scrolling.
        var time = timestamp - start;
        // Get percent of completion in range [0, 1].
        var percent = Math.min(time / duration, 1);

        window.scrollTo(0, startingY + diff * percent);

        // Proceed with animation as long as we wanted it to.
        if (time < duration) {
            window.requestAnimationFrame(step);
        }
    });
}

将HTML添加到Chrome当前标签页不起作用

1 个答案: