CODEWITHSUNDEEP
jqueryhtmlcss
Jeiman
Jeiman

Reputation: 1181

Create a back to top button for website

I am trying to create a back-to-top button such as this example (http://www.meanthemes.com/plugins/meanmenu/, Scroll down and you'll view the back to top button on your right) and I can't seem to get it working.

Can anyone help me out in showing me how to create one and only triggering the button's display when the user scrolls down at least 20% of the page.

Thank you.

Upvotes: 1

Views: 3466

Answers (3)

Gajanan
Gajanan

Reputation: 140

Use jquery scrollTop to display the button . Here is the link this may help you .

http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/

jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
    } else {
        jQuery('.back-to-top').fadeOut(duration);
    }
});

jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
})
});

Upvotes: 1

chiliNUT
chiliNUT

Reputation: 19573

<script>
function gotoTop()
{
$('body,html').animate({scrollTop: 0}, 800);
}
</script>
<a href=javascript:void(0); onclick=gotoTop();>Top</a>

Upvotes: 0

Shiva
Shiva

Reputation: 6887

you can use the following jQuery code

$(document).ready(function() {
            // Show or hide the sticky footer button
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $('.go-top').fadeIn(200);
                } else {
                    $('.go-top').fadeOut(200);
                }
            });

            // Animate the scroll to top
            $('.go-top').click(function(event) {
                event.preventDefault();

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

check this tutorial for more info

Upvotes: 1

Related Questions