Back to Top of page

Asked

Viewed 4,991 times

13

I need to have a fixed icon on the page in the right corner below the screen. By clicking this icon he goes back to the top of the page, doing the Scroll scroll to the top of the page.

Could someone help me? I’m a beginner and have trouble doing this.

Link to a website that does the same.

http://designgeekz.com/20-best-jquery-plugins-for-2014/

javascript jquery css
  • 1

    <a href="#">link</a>

  • 1

    This does not load, just scrolls (jumps) to the top.

  • Or, via jQuery - $('html,body').scrollTop(0);. In pure Javascript would be scroll(0,0);.

  • Thank you so much for the help on another @Marconi question, with the answers to your question I managed to solve my problem. + 1 ;)

  • @Tiagop. C quiet.

3 answers

10


The Button

First let’s create the aspx button

<asp:HyperLink NavigateUrl="#" runat="server" cssClass="scrollToTop">Topo</asp:HyperLink>

Or in html:

<a href="#" class="scrollToTop">Topo</a>

Applying CSS to the button

.scrollToTop{   
    position:fixed;
    top:75px; 
    right:40px;
    display:none;
}

And finally, the jQuery:

$(document).ready(function(){

    //Verifica se a Janela está no topo
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Onde a mágia acontece! rs
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});

Jsfiddle DEMO

Translated from the page of: Paul Underwood

  • jQuery to drag the page to the top? We’re not killing a fly with a cannon shot?

  • @user6492 If it’s a library that the original project already uses, I don’t see why not.

  • @Marconi, as so blinking?

10

The easiest way is without any script/animation - unlike this link you gave of example.

Shortly after the <body>, include a small anchor:

<body>
    <a id="topo"></a>
    ...

Then include button marking:

    <a href="#topo"><div id="botao_topo"><img src="img" /></div></a>

To finish, just apply the CSS button. An example is below:

#botao_topo {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 999;
}

Edit: I prepared a Jsfiddle with small improvements possible. If you want to apply them, you need to add a &nbsp; at the anchor.

  • Tranquil, @Marconi :) The more answer options you have around here, the better, because the idea of the site is to help not only you, but everyone else who comes to see your question later! (So feedback is very important, too!)

3

As shown in the following link http://jsfiddle.net/z3w0sbxr/ jQuery solution, but how do you want to use it? With jquery, with pure html without any effect? ... Follow my example with jQuery.

<!-- Parte HTML -->
<div style="">
    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
    </div>
    <div id="go-to-top" style="position:fixed; bottom:0; right:0">
        <a href="#">TOP</a>
    </div>

/* Código jQuery */
$('#go-to-top').each(function(){
    $(this).click(function(e){ 
        e.preventDefault();
        $('html,body').animate({ scrollTop: 0 }, 'slow');
        return false; 
    });
});

Browser other questions tagged javascript jquery css

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