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

Removing a CSS Class Using Tampermonkey: A Step-by-Step Guide

Create a Flot graph using data from a database

JavaScript code to locate the most pertinent strings within an array based on a specific substring

Replace async/await with Promise

Once a value is selected from the datalist input autocomplete, it loses focus

Identifying the user's location within the application and dynamically loading various Angular scripts

Use TypeScript to cast the retrieved object from the local storage

Stop the automatic hiding of the sticky header when reaching the bottom of the page

Connecting Angularfire2 with Firestore for advanced querying

The checkbox is not showing the check mark accurately

Steps to design a unique input radio button with embedded attributes

Google Chrome Content Script: Unable to Trigger Dynamically Added Button

Issues with the functionality of the asynchronous socket.io JavaScript callback are being experienced

Investigating the issue of drag and drop functionality not working with the combination of rspec, capy

What is the method of duplicating an array using the array.push() function while ensuring no duplicate key values are

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Access a designated tab within a CSS-designed tab system

Exploring the Application of CSS Styles in Selenium

Create a single declaration in which you can assign values to multiple const variables

Errors encountered: Navigation guard causing infinite redirection due to unhandled runtime issue