Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Scroll To Top Javascript In Html Website

Post a Comment
I am trying to implement the scroll to top feature in my website: www.arrow-tvseries.com. The 'button' is seen on the website however it does not work properly, because when clicke

Solution 1:

Try this and let me know if it is not working:

<!DOCTYPE html><html><head><style>input.pos_fixed
            {
                position:fixed;
                top:30px;
                right:5px;
            }
        </style><script>functionscrollWindow()
            {
                window.scrollTo(0,0);
            }
        </script></head><body><br><inputclass="pos_fixed"type="button"onclick="scrollWindow()"value="Scroll" /><br></body></html>

Solution 2:

You can do the same thing with below code:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  returnfalse;
});

Try this. Hope it helps.

Solution 3:

You could do something like this:

JSFiddle demo

$(window).scroll(function() {

    // if you have scrolled down more than 200pxif($(this).scrollTop() > 200) {
        $('#backtotop').fadeIn();
    } else {
        $('#backtotop').fadeOut();
    }
});



$('#backtotop').bind('click', function(e) {
    e.preventDefault();
    $('body,html').animate({scrollTop:0},800);
});

Solution 4:

The problem is that your javascript file is actually written in HTML.

In your HTML head section, you should have:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script><scriptsrc="scripts/back_to_top.js"type="text/javascript"></script>

Then your back_to_top.js should contain only the following:

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 200) {
            $('#backtotop').fadeIn();
        } else {
            $('#backtotop').fadeOut();
        }
    });

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

Post a Comment for "Scroll To Top Javascript In Html Website"