The functionality of smooth scrolling is not compatible with the overflow-y property

Looking to implement a smooth scroll feature, I came across an example online and tried to adapt it. Here's the code I'm working with:

https://jsfiddle.net/4DcNH/144/

I've added specific conditions to the html and body elements (changing the context by 50px from the top to accommodate the navbar). However, this adjustment seems to be interfering with the smooth scroll functionality. Does anyone have a solution for this issue? Any help is greatly appreciated.

$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 2000);
    return false;
}); 
});
javascriptjqueryhtmlcss

Answer №1

Are you looking for this information?

$(document).ready(function () {
    if(!/safari/.test(navigator.userAgent.toLowerCase())){
        $('html').css({'overflow-x':'hidden','overflow-y':'auto'});
    }
    $('a[rel="relativeanchor"]').click(function () {
        var $el = $($(this).attr('href'));
        $('html, body').stop().animate({
            scrollTop: $el.prop('offsetTop')
        }, 2000);
        return false;
    });
});

CodePen

Adjusted CSS to address browser compatibility issues. Removed overflows in the html for Safari browser and set them dynamically using JavaScript for other browsers that require it like Firefox.

To maintain an offset, simply subtract the desired value from the calculated offset. For instance, $el.prop('offsetTop') - 50 will add a 50px space above the target element.

Answer №2

The issue seems to arise from differences in how Chrome handles scrolling of the <body> element with a specified height of 100%. More information on this problem can be found in this discussion: Chrome Scrolling Issue

A practical solution is to enclose the scrollable content within a <div class="content"> and prevent scrolling on the <body> itself.

If you want the scrolling to stop precisely at a certain point, you may need to consider subtracting the vertical offset applied to the <html> tag (as suggested by @username) when performing the scroll. Your smooth scroll function could be implemented like so:

$('a[rel="relativeanchor"]').click(function(){
    var $el = $($(this).attr('href'));
    $('.content').animate({
        scrollTop: $el.prop('offsetTop')
    }, 2000);
    return false;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for integrating both client-side and server-side validation techniques in your web application

After conducting some research, I have come across information indicating that it is feasible to implement both client-side and server-side validation simultaneously. However, my focus is not solely on learning JavaScript; I am also interested in utilizi ...

javascriptphpbootstrap-5

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

pythoncssseleniumxpath

Retrieve AJAX images but experiencing issues with jQuery click function

In the index HTML file, I have 7 images. I have implemented a jQuery function that gets the ids of the images when they are clicked. The jQuery function looks like this: $(".imgss").click(function() { alert($(this).attr("id")); }); I assign the clas ...

jqueryajax

Enhance your viewing experience by magnifying a specific element, all while maintaining full control to navigate

Is it possible to create a zoom effect on a webpage that focuses on one specific element while still allowing for navigation and scrolling? I have searched online for plugins like Fancybox and Zoomooz, but none of them offer the functionality I need. I sp ...

javascriptjqueryhtmlcss

Tips for addressing the error message "Cannot PUT /":

I have been working on updating a local database using MongoDB for my project. Here is the code snippet I am using to update the data. The second part involves editing that redirects the updated data. I am not encountering any errors, so I am unable to i ...

javascriptnode.jsmongodbexpressmongoose

preferring images to be positioned side by side rather than stacked underneath each other

I am facing a challenge in arranging the images on my Tumblr site to display side by side instead of stacking one on top of the other. Despite multiple attempts at following advice from various forums, I have been unsuccessful in achieving the desired layo ...

html

Steps to incorporate padding to a nested Angular Component by leveraging the CSS of its parent component

It is evident from the example at https://material.angular.io/components/expansion/examples that material components can be customized using the CSS of the component embedding them: .example-headers-align .mat-form-field + .mat-form-field { margin-left: ...

cssangular

Implementing Twitter Login with Vue, Vuex, and Firebase

Exploring a Twitter login option for my sports social media dashboard project, I followed a helpful tutorial. While I've successfully implemented the HelloWorld component and retained the app.vue and main.js components, I encountered an error stating ...

javascriptfirebasevue.jsauthenticationvue-router

Using Highcharts within a Vue.js component

I'm having trouble creating graphical components with Highcharts and Vue.js because I can't figure out how to dynamically set the id attribute that Highcharts needs to render properly. Does anyone know how to set the id dynamically? This is the ...

javascripthighchartsvue.js

What is the best way to identify the differences between two non-unique arrays in JavaScript? I initially relied on underscore, but I am willing to

Given two arrays: firstArray = [{id: 'id1'}, {id:'id2'}, {id:'id3'}, {id:'id3'}] secondArray = [{id: 'id1'}, {id:'id2'}, {id:'id3'}] The expected output is [{id:'id3'}] This ...

javascriptjqueryarraysunderscore.js

Is there a way to receive a JSON request in Express delete using Restangular?

Below is the Restangular code that I am using for deleting an object: $scope.delO = (id){ Restangular .one("footer", id) .get() .then((ob) => { ob.remove(); } .catch.... } The deletion request is being successfully sent, co ...

javascriptnode.jsexpressrestangular

Is there an issue with JQM plugin due to jQuery's append() function?

I am just starting to learn about jQuery mobile as I develop an app using it. Whenever I click on the Add_details button, I want to add dynamic input fields only once. After saving, if I click on the Add_details button again, I need to append more dynamic ...

javascriptjqueryhtmljquery-mobile

An unspecified number of Ajax requests being made within a loop

Here is the dilemma I'm facing, despite trying different recommendations from StackOverflow: Situation: I am utilizing the Gitlab API to display all the "issues" in the bug tracker of a specific project on the system. Challenges: Everything wor ...

javascriptjqueryajax

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a ...

javascriptjqueryhtmlcss

Display information upon the clicking of a button and update the color of the selected button

When a button is pressed, I want to display content and change the color of the active button. Currently, I can do each operation individually, but I'm struggling to merge these functionalities. This is how my script looks like for displaying the con ...

javascripthtmljquerycss

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

javascripthtmlcss

Submitting information to a server

I have a simple Angular 6 app with follow and unfollow buttons. When you click follow, the number increases. I want to save these follower numbers to a JSON server. Here is the link to the JSON server documentation: JSON Server Documentation To see a dem ...

javascriptangulartypescriptangular6json-server

Newbie to Jquery mobile

I'm working on converting my small web application to use jQuery Mobile, but I'm encountering some issues even after going through the beginner documentation. On a particular page, the "native" select-dropdown box is still showing up, and I can&a ...

jquerymobilejquery-mobile

Filtering specific column in Datatables using the Search Box

I've been working with Datatables and I'm interested in applying the search box "filtration" to specific columns such as "name" and "email." Is this achievable, and if so, how can it be done? Thank you! ...

jquerydatatables

I require adding a new line of information into the database table

I am looking for help with adding data into a table without any user inputs. Specifically, I want to add data by passing them into an array and then be able to call them at the "Add Site" button so that the row is added into the table. Can someone assist m ...

htmlangulartypescriptangular6