Create a smooth scrolling effect for a div with a fixed position

Question

Create a smooth scrolling effect for a div with a fixed position

Having trouble scrolling a fixed position div on the page?

Are you using this jquery script:

$('html, body').animate({
    scrollTop: $(".example").offset().top
}, 750);

I had to set the body overflow property to hidden for another issue.

The problem: The above code doesn't work within a fixed position div. I need to scroll to an element inside a fixed positioned div.

<div class="overlay"> 
    <div class="example"></div>
</div>

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

I can't scroll to the example element inside the overlay div due to its fixed position.

Using the code below:

$('html, body').animate({
   scrollTop: $(".example").offset().top
}, 750);

It doesn't work within the fixed position overlay div.

javascript jquery css

Answer 1

Answer №1

The main issue lies in the fact that your scroll function is being called on html, body instead of the fixed element. To resolve this, you must set the overflow property to auto and activate the scroll animation on the actual element.

Here's how you can do it:

$(document)
.on('click', '#btnScr1', function(e) {
//IMPORTANT: call on the fixed element itself
$('#example').animate({ scrollTop: $(".exp").offset().top }, 750);
})
.on('click', '#btnScr2, #btnScr4', function(e) {
//IMPORTANT: call on the fixed element itself
$('#example').animate({ scrollTop: 0 }, 750);
})
.on('click', '#btnScr3', function(e) {
//IMPORTANT: call on the fixed element itself
$('#example').animate({ scrollTop: $('#example').prop("scrollHeight") }, 750);
})

#example { bottom: 0; left: 0; overflow: auto; position: fixed; right: 0; top: 0; }
.exp { text-align: center; }
p b i { background: yellow; color: red; padding: .5em 1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">

...your content here...

</div>

Answer 2

The main issue lies in the fact that your scroll function is being called on html, body instead of the fixed element. To resolve this, you must set the overflow property to auto and activate the scroll animation on the actual element.

Here's how you can do it:

$(document)
.on('click', '#btnScr1', function(e) {
//IMPORTANT: call on the fixed element itself
$('#example').animate({ scrollTop: $(".exp").offset().top }, 750);
})
.on('click', '#btnScr2, #btnScr4', function(e) {
//IMPORTANT: call on the fixed element itself
$('#example').animate({ scrollTop: 0 }, 750);
})
.on('click', '#btnScr3', function(e) {
//IMPORTANT: call on the fixed element itself
$('#example').animate({ scrollTop: $('#example').prop("scrollHeight") }, 750);
})

#example { bottom: 0; left: 0; overflow: auto; position: fixed; right: 0; top: 0; }
.exp { text-align: center; }
p b i { background: yellow; color: red; padding: .5em 1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">

...your content here...

</div>

Create a smooth scrolling effect for a div with a fixed position

Answer №1

Similar questions

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

Differentiate between chrome and chromium with the help of Javascript programming

Particles.js fails to persist as I scroll down the HTML page

Creating an Observable Collection in Angular using AngularFire2 Firestore

To activate a function, simply click anywhere on the body: instruction

This React.Js application hosted on Heroku is optimized for use on Chrome Desktop browsers

Mastering the art of linking asynchronous callbacks based on conditions

Toggling a div updates the content of a different div

React Component is not functioning with the timer running

What is the best way to align a text element to the right and a PNG element to the left within a

Incorporate jQuery's reload function inside another function with the syntax $(function

Dim the shading of a portion of the picture

Is your event listener failing to activate?

Different strategies for displaying a singular pie chart on multiple pages

Using JavaScript, extract individual objects from a JSON object

Tips for creating a unique design for a form that includes a non-binary mask, inspired by bitmasks

Learn the method to conceal rows within a table simply by toggling a button

Utilizing the CSS Top and Left attributes along with Jquery animations

CSS - Adding a Distinctive "Line" to a Navigation Bar

Revamping the design of a menu bar in WordPress