button to return to the beginning of the page

Asked

Viewed 115 times

0

Good afternoon, I am doing a project and created a button to return to the beginning of the page, but this does not appear when requested. I have seen videos lessons, numerous tutorials and nothing. I would like help. My code is as follows: 

/* BOTÃO PARA VOLTAR AO INÍCIO */
$(document).ready (function(){
    var divBotao=$('.botaoVoltar');
    var linkBotao=$('.botaoVoltar-Link');

    /* Mostrar botão*/

    $(window).scroll(function(){
        if($(this).scrollTop()>70){
            divBotao.fadeIn();
        }else{
            divBotao.fadeOut(); 
        }

    });

    /* Clicar e voltar ao topo*/

    divBotao.click(function(){

        $('html,body').animate({scrollTop:0},800);

        return false;
    });
});
.botaoVoltar{
    position:fixed;
    float:right;
    margin-left:900px;
    margin-top:400px;
    width:100px;
    height:50px;
    background-color:red;
    border-radius:5px;
    display:none;
}

.botaoVoltar-Link{
    text-align:center;
    display:block;
    line-height:50px;
    color: black;
    font-weight:bold;
    text-decoration:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="botaoVoltar">
    <a class="botaoVoltar-Link " href="">Voltar a topo</a>
</div>

I imported the jQuery library. Thanks in advance.

javascript jquery css html5

  • Your script works, what is missing is you put some height on the body, put the height of the body in 200vh that will generate scoll in the window and the button will appear

  • I did, but it didn’t solve

  • I posted the answer look what I left there described, will help you

  • I modified the margin part and put left and bottom in place. The problem was the link to the page, as both jQuery and Avascript were external. But the problem was that first I called Avascript instead of jQuery first, so the button disappeared and did not appear anymore. Thanks for the help.

1 answer

0

The element with position: fixed must have a property top or bottom, if it is not without the browser window reference. Like the properties top and bottom of every element has the default value auto, the fixed element has no way of knowing where it will stay fixed relative to the top or bottom edge of the window, causing the element to track the flow of the elements and stay out of the window when the page content exceeds the window height. That is, the code even works, but when the button receives the .fadeIn(), it will not be visible as it will be outside the visible area of the window, and in practice the element is not fixed.

So in your case, just put a property top: 0 in the div where the button is. However, it doesn’t make much sense to use margins in fixed element, just you use top (or bottom) and left (or right) to leave the button where you want.

In your case, just one left: 900px and a top: 40px; in place of margin-left: 900px and margin-top: 40px (put down left: 90px as an example because the snippet window is small and with left: 900px the button would stay outside the snippet area):

Another thing is that the property float shall not be used in fixed elements, because it has no effect. Whether the element should fixed, it makes no sense to use float. If you want the element stand to the right, use right.

/* BOTÃO PARA VOLTAR AO INÍCIO */
$(document).ready (function(){
    var divBotao=$('.botaoVoltar');
    var linkBotao=$('.botaoVoltar-Link');

    /* Mostrar botão*/

    $(window).scroll(function(){
        if($(this).scrollTop()>70){
            divBotao.fadeIn();
        }else{
           divBotao.fadeOut(); 
        }

    });

    /* Clicar e voltar ao topo*/

    divBotao.click(function(){

        $('html,body').animate({scrollTop:0},800);

        return false;
    });
});
.botaoVoltar{
    position:fixed;
    left:90px;
    top:40px;
    width:100px;
    height:50px;
    background-color:red;
    border-radius:5px;
    display:none;
}

.botaoVoltar-Link{
    text-align:center;
    display:block;
    line-height:50px;
    color: black;
    font-weight:bold;
    text-decoration:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div class="botaoVoltar">
    <a class="botaoVoltar-Link" href="">Voltar a topo</a>
</div>

  • I modified the margin part and put left and bottom in place. The problem was the link to the page, as both jQuery and Avascript were external. But the problem was that first I called Avascript instead of jQuery first, so the button disappeared and didn’t appear anymore. Thanks for your help.

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.