Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

Question

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

I'm encountering a strange issue with containers that have overflow:hidden and when the page URL includes an id. The content gets pushed up and becomes invisible. This problem arises when I apply padding and negative margin at the bottom to create equal columns.

Check out this demo by clicking the link below to see how the content moves up and becomes hidden: http://jsfiddle.net/6etu9ywc/1/

Is there a way to prevent this from happening? I'm open to a JavaScript solution if solving it purely with CSS isn't possible.

javascript css overflow hidden page-jump

Answer 1

Answer №1

It seems like the best solution to your query is to prevent the default behavior of an anchor tag.

I've made some changes on this fiddle http://jsfiddle.net/6etu9ywc/2/

In my update, I have included jQuery for now, but I may work on a pure JavaScript alternative when I find time.

By implementing the following code snippet, you can avoid the page from reloading when the anchor is clicked:

$(document).ready(function(){
   $('.column a').click(function(){
      return false;
   });
});

If this is not exactly what you were looking for, another option could be to have the links direct to references on the same page, although this would require adjustments in the fiddle based on your specific needs. I hope this information is helpful for you.

Answer 2

It seems like the best solution to your query is to prevent the default behavior of an anchor tag.

I've made some changes on this fiddle http://jsfiddle.net/6etu9ywc/2/

In my update, I have included jQuery for now, but I may work on a pure JavaScript alternative when I find time.

By implementing the following code snippet, you can avoid the page from reloading when the anchor is clicked:

$(document).ready(function(){
   $('.column a').click(function(){
      return false;
   });
});

If this is not exactly what you were looking for, another option could be to have the links direct to references on the same page, although this would require adjustments in the fiddle based on your specific needs. I hope this information is helpful for you.

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

Answer №1

Similar questions

IE8 triggers automatic download upon receiving JSON response using jQuery

Streaming the request body in NodeJS using ExpressJS without buffering

Retrieve the current font style with Kendo UI Editor

Having trouble with a JavaScript element not responding to clicks when displayed inline?

Unexpected JSON token error occurs in jQuery when valid input is provided

The Ajax request functions flawlessly on Mozilla but encounters issues on Chrome, causing confusion as it occasionally works

Using the combined power of CSS and jQuery to create dynamic visual effects based

Transferring PHP and JavaScript variables via AJAX to PHP page and storing in MySQL database table

How to dynamically update the maximum y-axis value in Vue-Chart.js without having to completely re-render the entire

Error Message: React encountered an issue when trying to access the 'theme' property of an undefined object

Maintain font kerning for span elements that are not displayed inline

The display message in Javascript after replacing a specific string with a variable

The primeVue menubar's active/focused item highlighting feature is not functioning correctly

The specified type '{ songs: any; }' cannot be assigned to the type 'IntrinsicAttributes' in NEXTJS/Typescript

insert a new DOM element into an array using jQuery

Solving the issue of image paths within external SCSS files in Nuxt.js

React - Paths of images converting to relative when directly accessed via the address bar

Update the SQL database by transferring star ratings from a JSP file

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

Issue with ng-model causing incorrect variable binding