Implement reverse scrolling effect on webpage

Hey guys, when you create a website, the browser loads it at the top of your design, and viewers scroll down. But what if your design is more interesting the other way around? What if you'd like a page to start at the bottom and scroll up? In this blog you'll learn how to implement reverse scrolling on your website in just 3 steps...

1. Start with just 7 lines of HTML:

Create panels/ sections inside one main container. I created 5 but you can create as per requirement.

<div class="panelCon">
   <div id="pane-5" class="panel">Section 5</div>
   <div id="pane-4" class="panel">Section 4</div>
   <div id="pane-3" class="panel">Section 3</div>
   <div id="pane-2" class="panel">Section 2</div>
   <div id="pane-1" class="panel">Section 1</div>
</div>

2. Few lines of CSS:

• Set the height of each panel to viewport height.
• Set the position as fixed of main container and bottom as 0. Set the body height as (100*Number of panels)vh.
• Below you can see height of body is set as 500vh as I have created 5 panels.

body {
  margin: 0;
  padding: 0;
  height: 500vh;
}
.panelCon {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99990;
}
.panel {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  line-height: 35px;
  text-transform: uppercase;
}
#pane-1 {
  background-color: pink;
}
#pane-2 {
  background-color: #e8e8e8;
}
#pane-3 {
  background-color: red;
}
#pane-4 {
  background-color: pink;
}
#pane-5 {
  background-color: yellow;
}

3. Finally, just 3 lines of JS:

Inside onScroll function of window, increase the bottom value but in negative 😉

$(window).on("scroll", function () {
  $(".panelCon").css("bottom", $(window).scrollTop() * -1);
});

and you're done.

.

Don't want to follow the steps? Below is Github link for you :)
Demo: https://tbaveja.github.io/reverse-scrolling/
Code: https://github.com/tbaveja/reverse-scrolling

.

Thanks for reading !

Connect with me on LinkedIn:
https://www.linkedin.com/in/tarun-baveja-000a9955/

Comments

[mini kothari]

This will really help to understand the concepts. Thanks Tarun.

[tbaveja]

Thanks Mini. 😊

[Santosh Kori]

Good One. Interesting.
Keep posting...

[tbaveja]

Thanks :)
Yes, will try to share more :)

[Anmol Chopra]

Ideas_to_implement, I was wondering to have my own website running. Really Nice and unique.

Great Idea !!
Thanks for sharing Tarun.

[MdO Media]

Does anyone have any insight as to how one can make this design style accessibility friendly per the WCAG? TA!

[Gagandeep Singh]

Reverse scrolling can be applied when user no longer wanted some content to gear up.