DEV Community

loading...
Cover image for Implement reverse scrolling effect on webpage

Implement reverse scrolling effect on webpage

tbaveja
MERN Stack Developer
・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (6)

Collapse
minikothari profile image
mini kothari

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

Collapse
tbaveja profile image
tbaveja Author

Thanks Mini. 😊

Collapse
santoshkori profile image
Santosh Kori

Good One. Interesting.
Keep posting...

Collapse
tbaveja profile image
tbaveja Author

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

Collapse
anmolchopra69 profile image
Anmol Chopra

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

Great Idea !!
Thanks for sharing Tarun.

Some comments have been hidden by the post's author - find out more