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 the WordPress Scroll Back to Top plugin page
Simple Grey Button Docked to the Right of the Screen
- 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
- 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
- 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
- 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
- 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
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
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
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
Works Great!
I have used this on many sites with no issue.
Thanks Joe!
JP
Hi,
Your back to top plugin is amazing! thanks.
How can I change the design to “Grey circle”
Best regards,
Oren