Landing Page Details

Modern Scrolling for Your Website!

TotalScroll plugin was created for multicolumn websites and with it you can adjust your menu column or sidebar’s scrolling speed. Column scroll speed is set as a value between 0-1, where 1 corresponds to default browser scrolling speed. Also TotalScroll can control amount of offset for every column and prevent it from being scrolled too much.

Among other with TotalScroll you can make any column sticky simply by assigning a “ts-sticky” class; use its build-in “Reveal on Scroll” feature to add CSS3 animations to the content as you scroll down the page. Also plugin is fully responsive and works with most fixed/fluid grids

Key Features

  • Created for multi-column websites
  • Works on Android and iOS devices
  • Not restricted to specific grid system
  • Bootstrap v3 ready
  • Configurable column scroll speed
  • CSS3 for extra smooth performance
  • Dynamic recognition of layout change
  • Configurable “single column” break point
  • Build in “reveal-on-scroll” feature
  • jsHint.com compliant code
  • Well documented

Changelog

# version 1.0 (Nov 23, 2016) - plugin released!

# version 1.1 (Feb 22, 2018) - fixed problem with snapping columns back to the top (in some cases there was 1px gap)

Credits & Sources

Photos used in preview are from https://morguefile.com

  • stevenwolffy

    2017-03-16 06:20:53
    Purchased Reply

    this does not work with widths smaller than 900. the columns are on top of each other. I need it to follow the bootrap3 grid settings. How do I disable this plugin on smaller screens? Thanks, Steven [email protected]

  • flGravity

    2017-03-21 06:58:52
    Purchased Reply

    Hi! May I take a look on your website. I think I can solve this issue

  • flGravity

    2017-03-21 07:08:22
    Purchased Reply

    I have sent you email.

  • stevenwolffy

    2017-03-16 05:28:02
    Purchased Reply

    I purchased you TotalScroll which doesn't seem to support a footer. How can I use a footer to where the columns don't overlay it. Please help. [email protected] Thanks, Steven

  • flGravity

    2017-03-21 07:09:44
    Purchased Reply

    Hi Steven! I sent you email. Please give me link to check and I think I will help you with your problems.

  • annatsang27

    2018-07-12 20:23:38
    Purchased Reply

    Hi, I would like to know if this plugin works with bootstrap version 4 or not, thanks! Cheers, Anna

  • flGravity

    2018-07-13 01:23:09
    Purchased Reply

    Hi! It should work. But if you will have any trobles getting it to work I can fix for free.

  • PreScriptZ

    2016-11-23 10:36:01
    Purchased Reply

    GLWS!

  • flGravity

    2016-11-24 02:01:24
    Purchased Reply

    Thank you!

  • wearecoda

    2018-09-28 18:15:52
    Purchased Reply

    Hi, I have recently downloaded this plugin and its great! However, I would like to add a div below the main columns so I can add additional content below this (see example here: http://hatchpr.pipeten.co.uk/test/) Is there also a way I can add the {class=”ts-reveal”} to a div so I can revel the text on scroll too. I hope you can help. Thanks Wayne

  • flGravity

    2018-09-29 14:47:16
    Purchased Reply

    Hi! you can add a div below total scroll container. If there will be any issues you can contact me and I will help to fix them. Regarding ts-reveal class, it works only in totalscroll columns. You should look for specific plugin to reveal content that can work in body of your website - https://scrollrevealjs.org/

  • wearecoda

    2018-09-26 21:26:29
    Purchased Reply

    Hi, I have recently downloaded this plugin and its great! However, I would like to add a div below the main columns so I can add additional content below this (see example here: http://hatchpr.pipeten.co.uk/test/) Is there also a way I can add the {class="ts-reveal"} to a div so I can revel the text on scroll too. I hope you can help. Thanks Wayne

  • flGravity

    2018-09-29 15:08:55
    Purchased Reply

    Hi! See my reply in another comment.

  • ch0rn

    2017-06-16 09:32:10
    Purchased Reply

    Is it possible to get this to work with a 2 column setup where 1 column is a fixed width ? Like for example: http://www.dynamicdrive.com/style/layouts/item/css_liquid_layout_22_fluid_fixed/ (just a quick rough example)

  • flGravity

    2017-06-22 05:47:55
    Purchased Reply

    I'm so sorry!.. I approved refund. Anyway.. TotalScroll should work with the layout as in your example. If you are still interested please give me the link where you use my plugin and I will check it tomorrow.

  • annatsang27

    2018-08-21 00:16:11
    Purchased Reply

    Hi, may I know if there's a way to calculate the columns' heights correctly before the images are loaded?

  • flGravity

    2018-08-21 16:28:19
    Purchased Reply

    Hi! You can use imagesLoaded jQuery plugin to wait for images and then run the code that relies on their dimentions. https://imagesloaded.desandro.com/

  • annatsang27

    2018-08-26 00:59:49
    Purchased Reply

    Thanks! That works :) However, I have found 2 more issues: (1) The multi-column layout scrolling seems not working on iPad. (2) The scrolling is not performing well on Internet Explorer 11 and Safari - the shorter column looks jumpy during scrolling. Would you mind if I send you the demo link via email? Thanks a lot!

  • flGravity

    2018-08-27 14:35:57
    Purchased Reply

    Yes, sure.

  • annatsang27

    2018-08-27 18:08:28
    Purchased Reply

    thanks - could you please share your email address with me?

  • flGravity

    2018-08-28 00:23:37
    Purchased Reply

    Hi! You can write me via my profile page here - https://codecanyon.net/user/flgravity

  • mikedubs

    2017-01-31 09:48:58
    Purchased Reply

    awesome! any plans to make this a wordpress VC add on or plugin?

  • flGravity

    2017-02-02 03:35:49
    Purchased Reply

    Thanks! I created this plugin after I made a site for customer that uses this effect. I think this plugin can be more interesting for theme developers rather than for all day usage. TotalScroll requires site layout with vertical columns to work. But all sites are different so this can be a problem in case Wordpress plugin.

  • mikedubs

    2017-02-03 10:57:43
    Purchased Reply

    understood. much thanks!

  • annatsang27

    2018-07-16 19:17:38
    Purchased Reply

    Hi, I would like to know if the second column could follow the end of the first column on the mobile version. And what's the use of "singleColumn" option? Here's my test: http://morningthinker.com/bka/demo1/desktop/ Cheers, Anna

  • annatsang27

    2018-07-16 20:21:20
    Purchased Reply

    Moreover, it seems quite buggy if I insert more content after the columns. How could I fix that? Thanks! Another test: http://morningthinker.com/bka/demo2/desktop/

  • flGravity

    2018-07-17 23:45:24
    Purchased Reply

    Hi! "singleColumn" option sets window width in "px" when grid should collapse into single column for mobile view. That means that total scroll won't animate columns any more. But the styling is up to you. Regarding your demo #2. I found the solution to the issue with left column overlapping right column when you scroll down to the footer. What you need to do is 1. change .inner class in your css file

    #landingFeature > .inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    }
    
    2. add this class to your CSS file
    .ts-sticky {
    position: absolute!important;
    top: auto!important;
    bottom: 0;
    }
    
    this will override default fixed positioning of left column and will make it stick to the bottom of container. If you will have any other questions/problems let me know!

  • annatsang27

    2018-07-18 14:39:10
    Purchased Reply

    Thanks a lot - that works! For demo #2, I have added the [singleColumn: "576px"] option. It works well if I resize the window from desktop width down to less than 576px. However, if I first loaded the site in window's width less than 576px, the columns will overlap. Could you please have a look? Thanks!!

  • flGravity

    2018-07-19 01:38:17
    Purchased Reply

    You can fix this by triggering resize event after TotalScroll init

    $(widow).trigger('resize');
    
    it should force plugin to check for window size

  • annatsang27

    2018-07-19 09:46:35
    Purchased Reply

    that works! thanks for the tips :)

  • flGravity

    2018-07-19 14:15:02
    Purchased Reply

    No problem!