This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery (a free javascript framework). You’ll need to download jQuery if you aren’t using it already.
You can either view the demo source if you’re an advanced developer, or read on and I’ll go through the CSS, jQuery, and HTML code separately below.
The HTML (inside the <body>)
<body> <div id="top"></div> <!-- put all of your normal <body> stuff here --> <div id="message"><a href="top">Scroll to top</a></div> </body>
The CSS
#message a { /* display: block before hiding */ display: block; display: none; /* link is above all other elements */ z-index: 999; /* link doesn't hide text behind it */ opacity: .8; /* link stays at same place on page */ position: fixed; /* link goes at the bottom of the page */ top: 100%; margin-top: -80px; /* = height + preferred bottom margin */ /* link is centered */ left: 50%; margin-left: -160px; /* = half of width */ /* round the corners (to your preference) */ -moz-border-radius: 24px; -webkit-border-radius: 24px; /* make it big and easy to see (size, style to preferences) */ width: 300px; line-height: 48px; height: 48px; padding: 10px; background-color: #000; font-size: 24px; text-align: center; color: #fff; }
The jQuery
$(function () { // run this code on page load (AKA DOM load) /* set variables locally for increased performance */ var scroll_timer; var displayed = false; var $message = $('#message a'); var $window = $(window); var top = $(document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { // use a timer for performance if($window.scrollTop() <= top) // hide if at the top of the page { displayed = false; $message.fadeOut(500); } else if(displayed == false) // show if scrolling down { displayed = true; $message.stop(true, true).show().click(function () { $message.fadeOut(500); }); } }, 100); }); });
No comments:
Post a Comment