scroll to top

by tracker1

HTML

<div class="wrapper">
    <div class="content">	
	    <div id="searchChallenges">
            <p>content here</p>
             <p>content here</p>
             <p>content here</p>
             <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content here</p>
            <p>content...

CSS

ul{
    list-style-type:none;
}

li{
    display:inline;
}

#beamUp{
	height: 3em; 
	width: 20%; 
	background-color: #d1d1b8; 
	display: inline;
	 padding: 1em;
	 position:fixed;
	 right: 0;
	 bottom: 0em;
	 font-weight: bold;
	cursor:pointer;
	color: #0c0c08;
}

JavaScript

$(document).ready(function () {
    $("#beamUp").hide();
    
    $("#beamUp").click(function() {
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });

    $(document).on('scroll resize', function (e) {
        var viewHeight = $(window).height();
        var viewTop = $(window).scrollTop();
        var footerTop = $("footer").offset().top;
        var baseline = (viewHeight + viewTop) - footerTop;
        var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});
        
        if (viewTop >= 50) {
            bu.show(1000);
        } else {
            bu.hide(1000);
        }
    });
    
});