滚动按钮使人向下或向上

Question

I wanted to make two buttons, one was to move up the pages and show up when it exceeds 300px and the other was to be shown immediately and move the person who clicks to the bottom

I will add that I am new in programming

I made one button that takes a person down the page with Javascript and when I added the second it only displayed the last button HTML

div id="TotopButton">^<span id="test"></span></div>
        <div id="ToDownButton">^<span id="test2"></span></div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

#TotopButton
{
    background-color: red;
    color: black;
    font-size: 35px;
    padding:10px;
    position:fixed;
    bottom:15px;
    right:15px;
    height: 50px;
    width: 150px;
    border:1px solid black;
    text-align: center;
    display:none;
}
#TotopButton:hover
{
    color:white;
    cursor:pointer;
   
}
#ToDownButton
{
    Background-color: blue;
    color: black;
    font-size:35px;
    padding:10px;
    position:fixed;
    bottom:15px;
    left:15px;
    height:50px;
    width:150px;
    border: 1px solid black;
    text-align: center;
    display: none;
}
#ToDownButton:hover
{
    color:white;
    cursor:pointer;
   
}

Javascript

  window.onload = function()
   {
     var TotopButton = document.getElementById("TotopButton");
     var test = document.getElementById("test");
     window.onscroll = function ()
     {
        var TotopButton = document.getElementById("TotopButton");
         var yScrollAxis = window.pageYOffset;

        var test = document.getElementById("test");
        if (yScrollAxis > 300)
        {
            TotopButton.style.display = 'block'
        }
        else
        {
            TotopButton.style.display = 'none'
        }
        test.innerHTML = " "  + window.pageYOffset
     }
     TotopButton.onclick = function()
     {
         window.scrollBy(0, -1 * window.pageYOffset);
     }
   };
   //Secon button
   window.onload = function()
   {
     var ToDownButton = document.getElementById("ToDownButton");
     var test2 = document.getElementById("test2");
     window.onscroll = function()
     {
        var ToDownButton = document.getElementById("ToDownButton");
         var yScrollAxis = window.pageYOffset;

        var test2 = document.getElementById("test2");
        if (yScrollAxis > 50)
        {
            ToDownButton.style.display = 'block'
        }
        else
        {
            ToDownButton.style.display = 'none'
        }
        test2.innerHTML = " "  + window.pageYOffset
     }
     ToDownButton.onclick = function()
     {
         window.scrollBy(0, 1000 * window.pageYOffset);
     }
   };

Answer 1

I use a similar button, and this is my setup for the top button you described:

HTML:

[code]
<section class="floating-button">
    <div class="btn-wrapper">
        <a class="primary-btn" id="floating-btn" href="#bottom-form">Apply Now</a>
    </div>
</section>
[more code]
<section class="final-form" id="bottom-form">
    [form here]
</section>

jQuery

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if ((y > 490) && (y < 5698)) {
        $('#floating-btn').css('visibility','visible').fadeIn();
    } else {
        $('#floating-btn').fadeOut();
    }
});

For the above script, adjust 490 to where you want the button to fade in; you can check the right place adding console.log(y) ; you may also want to remove the y < 5698 if you don't want to fade out the button at the bottom of the page

SCSS

.floating-button {
    z-index: 1;
    position: fixed;
    bottom: 34px;
    width: 100%;
}