Scroll Top and Bottom WordPress Plugin

Version 2.8.3 Released

Version 2.8.3 has been released on 10/26/2014  with hide option of Scroll top and bottom plugins on pages. All other options are still with this version.  Check Scroll Top and Bottom  WordPress Plugin on WordPress.org

Scroll top and bottom Version 2.8.3
Scroll top and bottom Version 2.8.3

Version 2.7 Released

Version 2.7 has been released on 19 April, 2014  with custom button upload and use option including all the previous options. See the documentation page to get more information

Version 2.7 of Scroll top and bottom wordpress plugin
Version 2.7 of Scroll top and bottom WordPress plugin

Version 2.6 Released

Version 2.6 has been released with scroll speed option and all old bug also has been fixed. See the documentation page.

Scroll top and bottom version 2.6
Screenshot of Scroll Top and Bottom WP Plugin version 2.6

Scroll Top and Bottom Version 2.5

In Scroll Top and Bottom Version 2.5 (updated on 19-02-2014) is actually the same version but with some changes such as jQuery Library Update, JavaScript code change and some effects. It will response on Mobile Device as the button will not display if width is below 500px
To Check those effects, please see the right-bottom corner of this my site.

Scroll Top and Bottom Version 2.0

Scroll Top and Bottom Version 2.0 has been released with new features. Now, it has 12 set of icon what will display as the top and bottom button. And you can choose them from your admin panel. If your site template or other plugin use jQuery previously, it may not work. In that case you have a option to disable the jQuery used for this plugin. It is to avoid the overflow  of the script. The following is the screen shot of the setting page of Scroll Top and Bottom.

Scroll top and Bottom
Scroll top and Bottom

Download it from WordPress Plugin Directory.

Demo? Use the right bottom two button of this site.

Scroll Top and Bottom version 1.0

Scroll Top and Bottom is created to scroll to top and bottom i.e. up and down of the site. User can go to top and bottom of the site using this tool easily by one click. This WordPress plugin is create with jQuery. Download the plugin and enjoy. The demo is in this site.

Note: This plugin may not work if your theme use the jQuery. In this case you need to edit a little of this plugin. Open the scroll-top-and-bottom/index.php from your plugins directory and find "include('jq.php');". Now you have to make this line as "//include('jq.php');" and I think it may work. Thank you.

46 thoughts on “Scroll Top and Bottom WordPress Plugin”

  1. Hi! Your Scroll Top and Buttom Plugin is TOP! Thumbs Up! I have only one short question: the button are placed in the right bottom on my page. But i want to place it in the left bottom of my page. What i have to change to do this?

    Thanks for answering!

    Mirko

  2. Hello Mirko, Thanks for your Thumbs Up!

    To place the button right to left, you have to change the style.css inside the css folder of the plugin. i.e., Open ../ plugins/scroll-top-and-bottom/css/style.css and replace the existing with the following code. Hope it will work…

    .nav_up{
    padding:2px;
    position:fixed;
    width:32px;
    height:32px;
    bottom:20px;
    opacity:0.7;
    left:66px;
    cursor: pointer;
    }
    .nav_down{
    padding:2px;
    position:fixed;
    width:32px;
    height:32px;
    bottom:20px;
    opacity:0.7;
    left:30px;
    cursor: pointer;
    }

  3. Hi Shariar,

    I LOVE your plugin, but I've found that it clashes with another plugin I use. When I install Scroll Top and Bottom, it breaks the Collapse-O-Matic list I have on this page: http://simple-cocktails.com/liquor-cabinet/ (the collapse functions stop working)

    Do you have any suggestions on fixing this so I can keep using your plugin?

    Thanks!

  4. Hi Shariar,I have installed your plugin and find it useful but I have an issue with speed, could you pls guide me how to reduce the scrolling speed.Also website can't scroll with mousewheel in opera,firefox and other browsers.Earlier it was wrking fine but suddenly stopped workng(Without plugin.I am not techie so pls provide me any simple solution.Many thnks in advance.. waiting for ur reply

    1. Dear Asash, I am working to fix the bug and will realize the next version very soon. The current version is based on old jQuery framework and I will implement the current version of jQuery with it. Hope you will wait for few days.
      Many Thanks...

      1. Dear Shariar,
        Thank you for your response and advise. Site has been working now with earlier theme setting only.

        Thank you for your time and kind response again.

    1. Hello Roger,
      Well, may be this issue about jQuery version and related script. Version 2.6 of Scroll Top and Bottom is using jQuery v2.1.0 and JavaScript related with this version. But the old version of Scroll Top and Bottom was based on jQuery JavaScript Library v1.4.2 and also the JavaScript for my plugin was related with that version. You may try this on your site and download link is as below. Download Other Version 2.0 from the link
      http://wordpress.org/plugins/scroll-top-and-bottom/developers/
      Thanks

  5. Hi Shariar,
    I like your plugin, thank you for it!
    I have similar issue as Dr.Belayet Hossen. WordPress uses jQuery 1.11 and your plugin uses 2.11 With some plugins it causes problems, as the ScrollTop function that you use gets into conflict in the different version of jQuery.
    Solution for me was to disable jQuery in your plugin through the admin page AND inserting the following line into tandb.php, just right after the tag for the scrolling function:
    $=jQuery;
    This made it work with jQuery 1.11
    I hope it helps, maybe you can include in the next version of your plugin.

    1. Hi Mark,
      I have already changed the jQuery of Scroll top and Bottom WordPress plugin and load the default jQuery Library of WordPress. And it's working fine on the site of Dr. Belayet Hossen. I am just checking the plugin with the other version of WP and hope with in two or three days, I will release the next updates.
      Thank you for support.

  6. Hi Shariar,

    i'm using your plugin and I love it but I would like to know if it is possible to disable the plugin on pages where you can't scroll down.

    Thanks in advance

    1. Hello Melanle,
      Yes it is possible. Make sure the your WordPress page comes with a class " page " with body tag .

      Now add a block of css like follows on your style sheet

      .page .scroll-to-top {
      display:none !important;
      }
      Hope it will help you 🙂

  7. Hi Shariar,
    Great plugin and I think it is exactly what I am after. Was hoping you might know how I would go about increasing the size of the custom button image. Have uploaded a jpeg that would like to use but it doesn't show in the dimensions that I have created it in. What css would I alter to allow for this to happen?

    Cheers,
    Nat

    1. Hi Nat,
      Actually plugins buttons are with fixed width and height.
      If I have seen the right site where you have installed the plugin, you are using only go to bottom button.
      You have to edit css a little as follows.
      open the style.css file inside the /scroll-top-and-bottom/css/ folder and edit

      .scroll-to-top,
      .scroll-to-bottom {
      padding:2px;
      position:fixed;
      width:32px;
      height:32px;
      opacity:0.8;
      cursor: pointer;
      z-index: 9999;
      }
      into
      .scroll-to-top,
      .scroll-to-bottom {
      padding:2px;
      position:fixed;
      width:40px;
      height:323px;
      opacity:0.8;
      cursor: pointer;
      z-index: 9999;
      }

      and also have to edit the tandb.php file, go to line no 17 and change the width and height into width="323" height = "40"

      Hope it will be okay 🙂

  8. Hello Shariar,

    First, thanks for your plugin - it is great =)

    I need to be able to define how much to scroll - I mean, instead of scroll all the way down, I would like to scroll just 50% or 80% up or down.

    Also, is this project on Github ? What about putting it there, so I can play with it and fix this myself ? =)

    Thanks for your work !

  9. Hi Shariar,

    Great plugin!

    However, what code goes into the tandb.php page to scroll 50% down?

    Thanks in advance.

    1. Hi Von,
      Thank you :),
      Please see the bottom of the file (tandb.php) and there you will get the script that run for scrolling.
      To Scroll 50% down (not into the bottom), replace
      jQuery(document).height() in line number 55
      into
      (jQuery(document).height())/2
      and hope it will work according to your requirements.
      Thanks

      1. Hi again Shariar,

        I've just noticed that scroll down 50% on iPad in portrait mode and on the iPhone scrolls down more than 50% is there any code that can make the scroll down 50% work as it does on a desktop and when it is is landscape mode on iPad?

        Thanks in advance.

        1. Hi Von,
          For this I have to modify the plugin a little and have to test, but not right now, I will be back with this with in 2 days 🙂
          Thanks in advance

  10. Hi Shariar,
    The plugin is cool!
    However, the issue is that when I choose the "Show On Only Home Page" option it doesn't work (the arrow disappear).
    The Theme is Divi and the plugins in use:
    Contact Form 7
    Duplicate Post
    Scroll Top and Bottom
    I' am working off line,
    Thank you in advance.

  11. Hi Shariar,

    Great plugin thanks for your work. I am trying to change the image of the picture, so I edited style.css, until recently it was working fine, but now style.css apears to be inactive and I am not able to modify the size of the image anymore.

    Do you have any suggestion?

    Thanks,
    Lau

  12. Hi Shariar,

    Thanks for the answers, yes I fixed it. I looks like I now need to modify both the css and php, while the css was sufficient before.

    Thanks again for the great plugin.

    Lau.

  13. Hi Shariar,

    Thanks for the plugin. Its great for what it was intended to do. I just wanted the arrow to flash, telling my audience that they need to scroll down. Do you have any suggestions?

    Thank you.

  14. Hey never mind! Just used this code from Animate.css and it works fine. Thank you anyway brother :

    /* Chrome, Safari, Opera */
    @-webkit-keyframes bounce {
    from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    }

    70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    }

    90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
    }
    }

    @keyframes bounce {
    from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    }

    40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    }

    70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    }

    90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
    }
    }

    .bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    }

  15. This plugin is great, but i think it's missing two options. One, that it scrolls down one page, instead of all the way to the bottom. And two, an option to hide the button after it's clicked. Is this plugin open source? I'd rather modify this one than have to write my own.

    1. Hi Jason,
      Thanks for your recommendation, I will try to add on click button hide option on the next updates and about the scroll down of middle of the page also.
      And you are free to edit it yourself for self use.
      Thank you.

  16. Hi Shariar,

    great plugin, thanks!
    I have an issue that on the mobile browser on my phone, the arrows only shows up if the phone in landscape position. it disappear when i put back to portrait position.
    Is there anything I need to change to show the arrows on my phone while it on portrait position?

    thanks!

    1. yes the plugin is designed that way. If you want to show the arrow in mobile also, you need to change the css file a bit.
      Open the style sheet of the plugin ( wp-content/plugins/scroll-top-and-bottom/css/style.css ) and then remove the lines putted below. Thank you 🙂

      @media screen and (max-width:500px){
      .scroll-btn-container {
      display: none;
      }

      }

  17. Hi Shariar,
    thanks a lot for this cool plugin.
    Is it possible to use own icons/pics as arrows... which format do they have to be?
    Tried with png 24 bits... but was not accepted??

    Thanks

    Daniel

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Md. Shariar's Blog

↓