Simply Add a Back to Top Button to Your WordPress Website

When your website frequently features lengthy content, it's necessary to add a back to top button, after all,build a websiteuser experience needs to be considered. This article introduces how to add a back to top button to a WordPress website.

Plugin Method

UseWordPress PluginIt's a ready-to-use method, very simple, suitable for beginners.

WPFront Scroll Top

The WPFront Scroll Top Plugin allows you to easily add a go to top button, with customizable options and various back to top icons. The WPFront Scroll Top Plugin has the following features.FeaturesDisplay button when user scrolls down the page. Scroll page to top using animation. Link to elements within the page. Link to other pages using URL. Create text, image, or Font Awesome buttons. Set any image you want. Hide on small devices. Hide on iframes. Page/Post filter. Auto hide. Asynchronous JavaScript. WPFront Scroll Top comes with many button effects and supports custom images, as shown below:After installing WPFront Scroll Top, you need to enable it in the settings to use it, supports asynchronous JavaScript loading. Plugin download address:https://wordpress.org/plugins/wpfront-scroll-top/

To Top

To Top's settings are relatively simple, supported features are as follows:FeaturesDisplay icon when user scrolls down the page Real-time preview via Customizer Scroll page to top using animation Set icon/image opacity Set icon (dashboard) or image for the top button For icons, set background color, icon color, icon size, and icon shape (from square to circle) Set any image you want Set image width Set icon position Show/hide top button in admin pages. Auto hide Hide on small devices The interface defaults to only 3 icons, you can modify icon colors, but cannot customize icons.Plugin download address:https://wordpress.org/plugins/to-top/

Simple Scroll to Top Button

Simple Scroll to Top Button's settings are also relatively simple, comes with 10 default back to top button patterns, does not support custom images, can set button shape, color, size, etc.FeaturesLightweight and fast Code protected using clean coding standards Intuitive interface with many settings Cross-browser compatible (works smoothly in any modern browser) Compatible with all WordPress Themes RTL compatible (right-to-left) Translation readyMain features includeRetina display support FontAwesome integration (40 icon combinations available) Background color changer (unlimited colors) Symbol color changer (unlimited colors) Changeable button background and symbol Changeable button size Variable scroll duration Option to enable/disable button Option to show button only on full site or homepage Auto hide button at top of page Live preview The button effects of Simple Scroll to Top Button are as shown below:Plugin download address:https://wordpress.org/plugins/simple-scroll-to-top-button/

Scroll Top

Scroll Top is very simple, like To Top, supports custom CSS styles. Features include: No setup required. Custom target. Unlimited colors. Retina support (icon font). Choose text or icon font. Customizable text. Position switcher (left or right). Change animation as you like. Custom CSS area The effect of Scroll Top is as shown below:Plugin download address:https://wordpress.org/plugins/scroll-top/Searching for 'go to top' or 'back to top' in the WordPress Plugin repository can reveal more back to top plugins, their functions are largely similar, just choose one that works. Next is the code method for adding a back to top button to a WordPress website.

Code Method

Searching online for the code method will yield many variations, here we only share the one currently used on Naiba's website. First, create a new file named back-to-top.js with the following content:

jQuery( document ).ready(function($){
  var offset = 100,
      speed = 250,
      duration = 500,
      scrollButton = $('#topbutton');
  
  $( window ).scroll( function() {
    if ( $( this ).scrollTop() < offset) {
      scrollButton.fadeOut( duration );
    } else {
      scrollButton.fadeIn( duration );
    }
  });
  
  scrollButton.on( 'click', function(e){
    e.preventDefault();
    $( 'html, body' ).animate({
      scrollTop: 0
    }, speed);
  });
});

You can alsoclick here to download directly from github(may require a proxy to open) After creating it, upload the js file to the js directory of your Theme files. Then reference this js file, there are two methods: one is to reference it in the Theme functions, the other is to add it yourself to the website Theme footer file (the method Naiba uses).For Theme function reference,insert the following code snippet into the functions.php file.

/**
 * 引用JS文件
 */
function themeslug_add_button_script() {
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );

/**
 * 网页添加返回按钮
 */
function themeslug_add_scroll_button() {
  echo '';
}
add_action( 'wp_footer', 'themeslug_add_scroll_button' );

You canUse Code Snippets to addThe above code, on one hand, is for security, and on the other hand, if you change the Theme, the code can still work without needing to be re-added. (However, note that after changing the Theme, you need to upload the js file or modify it to an absolute address yourself.)Modify the footer file referenceIn footer.php, insert the following code.

In the above code, https://blog.naibabiji.com/wp-content/themes/twentytwelve/js/back-to-top.js, please change it to your actual address.Finally, add CSS stylesIn the Theme's CSS file style.css, add the following code

#topbutton {
  position: fixed;
  display: none;
  height: 40px;
  width: 40px;
  line-height: 40px;
  right: 15px;
  bottom: 15px;
  z-index: 1;
  background: #000000;
  border-radius: 2px;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
}

#topbutton:after {
  content: "\2191";
}

After everything is done, refresh the Frontend to see the effect. Your button might be an „↑“ symbol; if you want to change it to ▲, just modify \2191 to \25B2.