Easy Peasy Scroll To Top Button

Hey! Wanna know how I got that spiffy new "Back to top" button you see at the bottom right of the screen? I MADEEEE ITTTTT! Yeah, me! Mrs.No-Techie-Techie made this bad boy!

Before you think I'm the Yoda of blogging code, (Actually, Aimee is my Yoda) I searched far and wide, and I just couldn't find easy instructions, or buttons that were cute, so I decided to make my own, and share it with you guys!

OK, this is what I did, and this is for BLOGGER only. I can't help you if you have any other sort of formatting.

To use my Back To Top Button-

1. Create a widget.

In Blogger, go to Layout, and create a new HTML/JavaScript widget at the footer part of your blog. (This is where you're going to put all the coding) leave the box open.

2. Add the code!

This one below was found on My Blogger Tricks. Copy all of it, and paste this code into the widget box. Now, this one has my graphic with the gold arrow and words. If you'd like to make your own, see the second set of instructions.

3. SAVE SAVE SAVE!

Save your widget box and go check out your spiffy new Back To Top button!

var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="http://i1279.photobucket.com/albums/y536/Jessica_Hnatiuk/Back%20to%20Top%20Button_zpstayvnzv4.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="IMAGE LINK" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

Post a Comment

Thank you so much for reading The Artsy Cajun! I love meeting new people, so please don't be afraid to comment below! Make sure you're not a no-reply blogger so I can write back especially if you noticed I do not respond to your comments.

How to enable your e-mail: BLOGGER ACCOUNTS: To do this, click on your Dashboard, click on EDIT PROFILE and place a check mark next to SHOW MY EMAIL ADDRESS, and finally scroll to the bottom and click SAVE PROFILE.