Georgia Lou Studios

Welcome to the Help Center!

Back to top button Edit or Remove | Blogger

Follow

The Back to Top or Scroll to Top button is a simple piece of code that can be easily removed or customized to suit your needs.

Step 1: Back up your current template

Just to be safe, make sure you backup your current template.

  1. Log in to your Blogger dashboard.
  2. Go to the Theme configuration page.
  3. Click on the Backup/Restore button in the top right hand corner of the screen.  The Template > Backup/Restore box will open up.
  4. To backup your current template, click on the orange Download full template button. Your template will download to your computer’s download folder with a name like template-##############. If want to restore your old template at any time you can upload this file using the Backup/Restore feature.
Step 2: Remove Back to Top Button
  1. Navigate to your Blogger Dashboard > Theme page.
  2. Click the Edit HTML button under the Live on Blog image. A new screen will open with the HTML code that is installed on your blog.
  3. Click anywhere INSIDE the Template Editor Window.
  4. Press [Cntrl] + [F] keys (Command + F on Mac) to open the Find/Search function inside the Template editor. The search box will appear in the upper right-hand corner.
  5. Search for: Back to Top Script. Hit ENTER to start search.
  6. Locate the following text in the Editor:

<!– Begin Back to Top Script –>
<script>
//<![CDATA[
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.backtotop’).fadeIn(duration);
} else {
jQuery(‘.backtotop’).fadeOut(duration);
}
});

jQuery(‘.backtotop’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
//]]>
</script>

<a class=’backtotop’ href=’#’>Back to Top</a>

<!– End Back to Top Script –>

7. Highlight the entire text – make sure to start at the first <!– and end at the final –>. Press BACK SPACE or DELETE to remove the text.

8. Click the Save Theme button at the top of the Editor to save your changes.

 

Or Edit Back to Top Button

  1. Navigate to your Blogger Dashboard > Theme page.
  2. Click the Edit HTML button under the Live on Blog image. A new screen will open with the HTML code that is installed on your blog.
  3. Click anywhere INSIDE the Template Editor Window.
  4. Press [Cntrl] + [F] keys (Command + F on Mac) to open the Find/Search function inside the Template editor. The search box will appear in the upper right-hand corner
  5. Search for: Back to Top Script. Hit ENTER to start search.
  6. Locate the following text in the Editor:

<!– Begin Back to Top Script –>
<script>
//<![CDATA[
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.backtotop’).fadeIn(duration);
} else {
jQuery(‘.backtotop’).fadeOut(duration);
}
});

jQuery(‘.backtotop’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
//]]>
</script>

<a class=’backtotop’ href=’#’>Back to Top</a>

<!– End Back to Top Script –>

7. To change the text of the Back to Top Button, find the piece of code that says Back to Top. You can change the wording to anything you want or add a Unicode symbol.

8. Click the Save Theme button at the top of the Editor to save your changes.

NOTE: To edit CSS appearance, locate the Scroll to Top section in the main template CSS.

 

Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk