The WordPress Scroll Back to Top plugin is extremely flexible and can accommodate nearly any design to match an existing website.  By adjusting a few simple configuration options you can easily adapt the plugin to your site in minutes.  To give you some inspiration for different scroll to top button ideas and to illustrate how simple it is to change the design I have a few screenshots of the button in action along with the settings needed to execute the design.

Check out my support page

Check out the WordPress Scroll Back to Top plugin page

 

Simple Grey Button Docked to the Right of the Screen

Light Grey Docked Right Button
  • Width: 35px
  • Height: 35px
  • Background Color: #DDDDDD
  • Hover Color: #CCCCCC
  • Foreground Color: #777777
  • Opacity: 100%
  • Border Radius: 5px
  • Horizontal Alignment: Right
  • Vertical Alignment: Bottom
  • Horizontal Distance from Edge: 0px
  • Vertical Distance from Edge: 30px
  • Label Type: (arrow)
  • Icon Size: 2
  • Custom Label Text: NA
  • Font Size: NA
  • Scroll Duration: 500ms
  • Fade Duration: 500ms

Grey circle

Grey Circle Button
  • Width: 76px
  • Height: 76px
  • Background Color: #777777
  • Hover Color: #888888
  • Foreground Color: #EEEEEE
  • Opacity: 100%
  • Border Radius: 38px
  • Horizontal Alignment: Right
  • Vertical Alignment: Bottom
  • Horizontal Distance from Edge: 30px
  • Vertical Distance from Edge: 30px
  • Label Type: (arrow)
  • Icon Size: 4
  • Custom Label Text: NA
  • Font Size: NA
  • Scroll Duration: 500ms
  • Fade Duration: 500ms

Blue Square

Blue Square Button
  • Width: 50px
  • Height: 50px
  • Background Color: #3BB8C6
  • Hover Color: #57BBC6
  • Foreground Color: #EEEEEE
  • Opacity: 100%
  • Border Radius: 10px
  • Horizontal Alignment: Right
  • Vertical Alignment: Bottom
  • Horizontal Distance from Edge: 30px
  • Vertical Distance from Edge: 30px
  • Label Type: (arrow)
  • Icon Size: 3
  • Custom Label Text: NA
  • Font Size: NA
  • Scroll Duration: 500ms
  • Fade Duration: 500ms

Grey Square

Grey Square Button
  • Width: 50px
  • Height: 50px
  • Background Color: #777777
  • Hover Color: #888888
  • Foreground Color: #EEEEEE
  • Opacity: 100%
  • Border Radius: 10px
  • Horizontal Alignment: Right
  • Vertical Alignment: Bottom
  • Horizontal Distance from Edge: 30px
  • Vertical Distance from Edge: 30px
  • Label Type: (arrow)
  • Icon Size: 3
  • Custom Label Text: NA
  • Font Size: NA
  • Scroll Duration: 500ms
  • Fade Duration: 500ms

Red Button Docked to Bottom of Screen

Red Docked Bottom Button
  • Width: 120px
  • Height: 30px
  • Background Color: #DD4242
  • Hover Color: #C63D3D
  • Foreground Color: #EEEEEE
  • Opacity: 100%
  • Border Radius: 10px
  • Horizontal Alignment: Center
  • Vertical Alignment: Bottom
  • Horizontal Distance from Edge: 0px
  • Vertical Distance from Edge: 0px
  • Label Type: Custom Text
  • Icon Size: NA
  • Custom Label Text: Scroll to Top
  • Font Size: 12
  • Scroll Duration: 500ms
  • Fade Duration: 500ms

Check out my support page

Check out the WordPress Scroll Back to Top plugin page

5 comments on “Scroll Back to Top WordPress Plugin Button Designs

  1. Gijs says:

    Dear developer of the Scroll back to top plug-in for WordPress,
    First of all, thanks for the plug-in, it’s ace!

    However, there is an issue, when I use one of the displayed icons I get some weird glitchy text (no matter which one I pick) on the front-end. So I end up using a html character (like this one: ▲) But actually I want to use one the icons you ‘supplied’.
    Please help.

    Looking forward to your reply.

    Regards, Gijs

  2. Doug says:

    It would be nice to have an option to show on mobile or not or show on desktop PC’s or not.
    I have tried playing with Minimum Browser Resolution & Maximum Browser Resolution, but I can’t seem to get what I want.
    I want it to show on mobile and not on big screens.
    Thanks

  3. Linda Skugstad says:

    It’s a great feature, but when using the Scroll Back to Top button, the button goes to a page that says “Page Not Found” , then offers a search. I just want to go to the top of the page I am currently on. How can this be fixed? Thank you

  4. Jon P says:

    Works Great!
    I have used this on many sites with no issue.
    Thanks Joe!
    JP

  5. Oren says:

    Hi,

    Your back to top plugin is amazing! thanks.
    How can I change the design to “Grey circle”

    Best regards,
    Oren

Comments are closed.