ScrollTop not working with overflow: auto property in css

Question

Sorry if you found this question repetitive, but I could not find the correct answer on StackOverflow.

I use the following properties in my css class:

.panel{ background: rgba(203, 203, 210, 0.15); position: relative; float: right; ... overflow: auto; } 

When I use the function $('body').animate({scrollTop: 10}, 500); JQuery to scroll up the page, it does not work. When I replace the value of auto with something like "visible" or "inherit", it works. However, the page structure requires an overflow property.

Any idea?

Answer 1

The only way to overcome the problem with overflow:auto is to increase the page height and reset the height to its original value, as shown below:

 $('.panel').css({"min-height":"200%"}); $('body').animate({scrollTop: 10}, 500); $('.panel').css({"min-height":"100%"}); 

Answer 2

To do this with your specifications without removing the overflow value, you can wrap the scrollable .panel in a wrapper and use it. I took your code and added my own code in this code, with the only difference being that a shell was added, and js adapted accordingly.

https://codepen.io/c0un7z3r0/pen/Emgdbr

 $(".button").click(function(){ $("html, body").animate({ scrollTop: 0 }, "slow"); }); 

Scroll down the page to find the button that will take you back to the top, you will notice that css is the same as what was published in your example. Hope this helps.