<a> markup and nothing special with this feature except it's very useful for your readers. It suppose to be one of the must-have elements in your blog to let them jumping back above the fold section with single click. Most of the time, the event is faster than scrolling back or swiping down.If you were noticed, I put that feature inside my fixed bar to make it more accessible. I think that place is the best due to several problems - in my opinion - raise with other methods. I also got a few requests from readers which the latest;
How to create Scroll-Up into colorplate template like yours? I like your Scroll-Up. Faiz Naufal
An anchor link - Back to top function comes from an in page link usually located somewhere in footer area. When a visitor reaches particular depth, he may click this link as the anchor text or icon is self-explanatory. Although in page links are being used for others reason depend on their targets, we allow visitors to jump straightly to a specific element in our blog. For example - Skip this tutorial to get the code.
In HTML basic practice, we use
<a> tag to compose the markup for back to top feature.<a href='#element-in-your-blog' title='back to top'>Back to top</a>
- #element-in-your-blog - To set this hypertext reference, you have to identify which element you're going to refer.
Most of the cases, you will choose the first element(container) after <body> tag so that you can use its ID, e.g :
<a href='#page-wrapper' title='back to top'>Back to top</a>
The problem - Not all readers will find this back to top feature because it has been located inside the footer particularly when they are interested only reading your posts and not anythings else even going down to scan few good comments.
Fixed positioning - Then to let back to top feature more intuitive, people start using CSS to control its location specifically by setting
position:fixed. So the feature will be available most of the time inside the viewport.But another problem - To support fixed positioning, usually you will set
bottom:10px; right:20px; or sometimes people use negative margin. This feature will be sticky at the bottom right corner of your blog (i.e. your viewport). Easy but sometimes we missed how to implement CSS positioning the right ways. It causes;
Fixed/Sticky Bar Benefits
As the result so such annoying for mobile web users, I was looking another way to use fixed elements in a better way. Here fixed bar saved my time a lot. Again this kind of element is also not new in webdesign where you can see several plugins are ready to use.
Creating your own fixed bar might gives benefits as its contents are from you. For instance I'm able to throw my back to top feature and sharing buttons inside the bar.
Why fixed/sticky bar is different to floating stuff? It has sharp horizontal edge. Visually it looks like browser/app's footer. It does block your content but not breaking any line of text.
I found few tutorials for Blogger users that are so easy to get things done in few minutes; especially smooth scrolling back to top with jQuery. You have to put all code inside HTML/Javascript gadget, drop the code and drag the gadget, that's all. Yeah, it works because position of the new element itself is fixed. If you're the one who doesn't concern much with the flow in writing HTML, just go to them. Again, this boring tutorial might not suit for you.
I just don't like breaking the flow of the elements that you will know the reason, later. So here you need to create new element for your fixed bar. Where? before closing
</body> tag.The HTML
<div id='fixed-bar'>
<div id='bar-inner'>
<a class='go-top' href='#page-wrapper' title='back to top'>Back to Top</a>
</div>
</div>
- class='go-top' : Need this for later jQuery.
- #page-wrapper : Please refer to your target element.
The CSS
#fixed-bar {
margin: 0;
padding: 0;
background-color: black;
z-index: 100;
}
#fixed-bar a {
color: white;
text-decoration: none;
}
#bar-inner {
width: 960px;
margin: 0 auto;
height: 36px;
line-height: 36px;
}
- z-index: 100; : It will be used when javascript is enabled.
- width: 960px; : Please refer to your blog width.
Now, you should have a black horizontal bar after your footer and together with back to top link. Anyway the bar itself is static. Yes, you don't change its position yet from default. You will use jQuery to do next jobs. In addition, when talking about CSS positioning we have static, relative, absolute, and fixed. Static is the default position if its property is omitted.
Show/Hide Fixed Bar with jQuery
Let enhance the bar. Demo? Just scroll up and down this blog. What you're going to do are;
- Set fixed positioning so that the bar stays forever.
- Hide the bar when DOM is ready.
- Show the bar when a user scrolls down passing certain height.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script>
$(function () {
$("#fixed-bar")
.css({position:'fixed',bottom:'0px'})
.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#fixed-bar').fadeIn(200);
} else {
$('#fixed-bar').fadeOut(200);
}
});
});
</script>
- bottom : You MAY change to set the bar at the top of your blog.
- 400 : Height in pixels from top of HTML page.
- 200 : Speed in miliseconds.
Smooth Scrolling Back to Top
To add this effect, include this in JQuery script;
$('.go-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
- 1000 : Speed in miliseconds.
The END CODE
Okay, to sum up the code, here you are;
1. HTML - Put this before </body> tag
<div id='fixed-bar'>
<div id='bar-inner'>
<a class='go-top' href='#page-wrapper' title='back to top'>Back to Top</a>
</div>
</div>
2. CSS - Include in CSS section
#fixed-bar {
margin: 0;
padding: 0;
background-color: black;
z-index: 100;
}
#fixed-bar a {
color: white;
text-decoration: none;
}
#bar-inner {
width: 960px;
margin: 0 auto;
height: 36px;
line-height: 36px;
}
3. jQuery Library - Paste before </head> tag (IGNORE if you've already used)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
4. jQuery functions - Paste before </body> tag
<script>
$(function () {
$("#fixed-bar")
.css({position:'fixed',bottom:'0px'})
.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#fixed-bar').fadeIn(200);
} else {
$('#fixed-bar').fadeOut(200);
}
});
$('.go-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>
It's Javascript Dependent
Yes, yes. You shouldn't be worried though, if javascript is turned off. The bar will be staying static in place as the last element in your layout . That's the big reason you shouldn't break the flow.
Happy blogging...
