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>
            function scrollWindow()
            {
                window.scrollTo(0,0);
            }
        </script>
    </head>

    <body>
        <br>
            <input class="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");
  return false;
});

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 200px
    if($(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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="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"