akhileshdarjee/back to top responsive html button.html

## back to top responsive html button.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/css">
            a.back-to-top {
                display: none;
                text-align: center;
                line-height: 50px;
                width: 50px;
                height: 50px;
                position: fixed;
                z-index: 999;
                right: 20px;
                bottom: 20px;
                background-color: #1ab394;
                color: #fff;
                border-radius: 3px;
            }
            a.back-to-top:hover {
                color: #fff;
            }
        </style>
    </head>
    <body>
        <a href="#" class="back-to-top">
            <i class="fa fa-chevron-up"></i>
        </a>
        <script type="text/javascript">
            $( document ).ready(function() {
                // back to top
                var amountScrolled = 300;

                $(window).scroll(function() {
                    if ($(window).scrollTop() > amountScrolled) {
                        $('a.back-to-top').fadeIn('slow');
                    }
                    else {
                        $('a.back-to-top').fadeOut('slow');
                    }
                });

                $('a.back-to-top').click(function() {
                    $('body, html').animate({
                        scrollTop: 0
                    }, 400);
                    return false;
                });
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style type="text/css">
	a.back-to-top {
	display: none;
	text-align: center;
	line-height: 50px;
	width: 50px;
	height: 50px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background-color: #1ab394;
	color: #fff;
	border-radius: 3px;
	}
	a.back-to-top:hover {
	color: #fff;
	}
	</style>
	</head>
	<body>
	<a href="#" class="back-to-top">
	<i class="fa fa-chevron-up"></i>
	</a>
	<script type="text/javascript">
	$( document ).ready(function() {
	// back to top
	var amountScrolled = 300;

	$(window).scroll(function() {
	if ($(window).scrollTop() > amountScrolled) {
	$('a.back-to-top').fadeIn('slow');
	}
	else {
	$('a.back-to-top').fadeOut('slow');
	}
	});

	$('a.back-to-top').click(function() {
	$('body, html').animate({
	scrollTop: 0
	}, 400);
	return false;
	});
	});
	</script>
	</body>
	</html>