The beauty of this link and it is a link, not an image ;) is, it will only appear once the visitor has scrolled down from the top of the page and disappear again once they are back at the top. And it uses jQuery's .animate() function to make the users experience that little bit more pleasant.
Lets get started:
OK so to start with, we will need to add a link to the page. It isn't really too important where on the page its added as we will be using CSS to move its location and make it look pretty, but inside the <body>..</body> tags will be best.
- Login to your blog. At the top right of the page (for me anyway) click Design
- Click on the Edit HTML tab.
- Now search for the line: </body>
- Now just above the tag you want to add the line (set the text to what ever you want to appear):
<a href='#' id='toTop'>Scroll to Top</a>
Next we want to add the CSS to the page to make our link look a little more appealing. We can use the Template Designer to add the CSS, this will ensure the code is in the correct place.
Now we will have a link appear on the page at the bottom right, it will technically return the visitor to the top of the page, but not in a nice way, so onto the jQuery that will do the niceties for us:
- Now click on the Template Designer tab.
- On the list (top left) click on Advanced.
- Now scroll down and click on Add CSS.
- In the input box, add the following (change the colors and things to suite) and click Apply to Blog:
/* to top */
#toTop {
width: 100px;
background: #99d9f2;
border: 1px solid #bce1a6;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #333333;
text-decoration: none;
}Now we will have a link appear on the page at the bottom right, it will technically return the visitor to the top of the page, but not in a nice way, so onto the jQuery that will do the niceties for us:
- Return to the Edit HTML tab, in the Design section.
- Now we need to add some jQuery code to the section we setup in: Adding jQuery to your blogger.com. Add the following lines:
- The result will be something like this:
- Now save the template, and take a look at your work!!
$("#toTop").hide().removeAttr("href");
if($(document).scrollTop()!="0") {
$("#toTop").fadeIn("slow");
}
$(window).scroll(function(){
if($(window).scrollTop()=="0"){
$("#toTop").hide("slow");
}
else{
$("#toTop").show("slow");
}
});
$("#toTop").click(function(){
$("html, body").animate({ scrollTop: "0px" });
});
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#toTop").hide().removeAttr("href");
if($(document).scrollTop()!="0") {
$("#toTop").fadeIn("slow");
}
$(window).scroll(function(){
if($(window).scrollTop()=="0"){
$("#toTop").hide("slow");
}
else{
$("#toTop").show("slow");
}
});
$("#toTop").click(function(){
$("html, body").animate({ scrollTop: "0px" });
});
});
//]]>
</script>
If you have followed everything, you should have a link appear once you scroll away from the top of a post, and if you click the link, you will be scrolled to the top of the page.
Scoobler.
Some jQuery books from Amazon.com:
Scoobler.
Some jQuery books from Amazon.com:
No comments:
Post a Comment