Substitute for scroll-padding-top in Internet Explorer (For proper scrolling to regions)

Whenever I encounter an issue with a validation summary on a form and click on the corresponding 

<a href="#error1">Error 1...</a>
link for the error, the associated field is scrolled to. However, it is not properly in view because the scroll value does not account for the fixed header pixels. To address this discrepancy, I found a quick solution in Chrome by including 

html {
  scroll-padding-top: 150px;
}

Despite this workaround working in Chrome, it unfortunately does not have the same effect in Internet Explorer (IE). I have scoured stack overflow for a solution but have come up empty-handed. Appreciate any assistance provided. Thank you.

htmlcssinternet-explorer

Answer №1

Unfortunately, there is no direct equivalent for scroll-padding-top in CSS, making it challenging to implement a workaround for IE using only CSS. In IE, one approach is to calculate the offset of the desired element and then utilize jQuery to facilitate scrolling to that location upon clicking a link. The code snippet for the onclick function would look something like this:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
    var h1 = $("#error1").offset().top;
    $('html, body').animate({ scrollTop: h1 - 150 });
}

To demonstrate this, I have created a simple example which you can refer to. Both IE and Chrome produce similar results when tested.

Here is the result in IE:

https://i.sstatic.net/GvR3C.gif

If this solution does not resolve your issue, kindly provide a minimal, reproducible code sample specific to your scenario so we can further investigate and offer assistance.

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

What is the process of incorporating CSS into XML files?

My goal is to implement an embedded bar-code font via CSS in an XML file. The XML file provides order numbers that I want to visually represent as a barcode. Once this document is sent via email, it automatically generates a sales invoice. This snippet g ...

htmlcssasp.netxml

Is there a way to blend together two elements within a Bigcommerce theme seamlessly?

Recently, I have been tasked with customizing a Bigcommerce theme for a client. While I am not very experienced with Bigcommerce and only have basic knowledge of php, I have encountered an interesting challenge with the current theme header setup. The exis ...

phphtmlbigcommerce

How can I implement a division animation with Javascript upon clicking a hyperlink?

I need help with animating a div when clicking on a link. Specifically, when clicking on the "About" link, the height of the div should change. Currently, the height is set to '0em' in the CSS file. I attempted to change the height using "documen ...

javascriptjquerycssanimationhyperlink

What is the best method to customize CSS in ExtJS 5.0 by overriding a function?

Is there a way to dynamically add a rule to existing CSS using code, particularly in overrides? For example: var sheets = document.styleSheets; // Some code omitted for simplicity var sheet = sheets[sheets.length - 1]; sheet.insertRule('.overlay {flo ...

javascriptcssextjsextjs5

Fade in/out overlay effect when clicking on a content block

I've hit a roadblock while trying to implement overlay fading in and out to cover a block created by some JavaScript code. Here is a link to the project. When you click on any of the continents, a series of blocks with country flags will appear. You& ...

javascriptjqueryhtmlcss

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

javascripthtmlangularevents

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...

cssinlinevertical-alignmentlistitem

Unable to run code from a script that has been released, Colorbox parent.$.fn.colorbox.close is not functional

My code has been running smoothly, carefully checking for any changes to input fields before closing the colorbox. However, a problem arises when trying to close the colorbox using parent.$.fn.colorbox.close after sending data back to the server. Specific ...

jqueryvb.netinternet-explorercolorbox

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

I am seeking to utilize ng-href for loading different Themes. One issue I am encountering is that the unstyled content appears before the stylesheet is applied. I have created a Plunker where I made changes to Line 8 in the last 3 Versions for comparison ...

javascriptjqueryhtmlcssangularjs

A guide on obtaining meta tag content values and calculating their average

Currently, I am in the process of developing a website that makes use of Schema.org microdata to provide structured content for product listings. One thing I have come across is that Google requires an aggregate rating based on all the reviews. How can I e ...

javascripthtmlmeta-tagsschema.orgstructured-data

Is there a way to view the full HTML source code of this page by selecting the "more" button?

Exploring a web page related to forex trading can be an interesting experience. The website provides a list of live trade records, which can be accessed here: Typically, I use Python along with BeautifulSoup to extract information by reading the source co ...

pythonhtmlparsing

What is the JavaScript mouseenter/out event all about?

My goal is to create a hover effect using JavaScript. I am utilizing the mouseenter and mouseout events to display the content when the mouse hovers over a button and remove the content when the mouse moves out. However, I am facing an issue where the cont ...

javascripthtmlcssjsonajax

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

javascripthtmlcssvue.jsvuetify.js

Max call stack size exceeded error encountered and logged without catching

While attempting to display multiple markers on a Google map within the Ionic framework, I encountered an Uncaught RangeError: Maximum call stack size exceeded error message in the log. The issue seems to be related to the Cordova Google plugin that I am ...

htmlangularjsgoogle-mapscordovaionic-framework

After examining the width properties in the CSS code, it was discovered that one particular icon is larger in

Is there a way to adjust the width of the first icon in my container using CSS? The first icon appears larger than the others, and I'm having trouble making it the right size. #features { margin-top: 35px; } .grid { display: flex; } #feat ...

htmlcssfont-awesome

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

htmlcsstwitter-bootstrapdatatables

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

javascriptjqueryhtmlcssuser-interface

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Encryption Extensions for Video Content in HTML5

I know this might not be the typical question, but I'm hoping the knowledgeable community here can help me out. After searching high and low on the internet with various search terms, I've yet to find a comprehensive guide on how to actually imp ...

htmlvideoencryptiondrmeme

Exploring the World Wide Web with BeautifulSoup4

I am trying to extract all the times from a webpage and store them in a list variable. How can I achieve this? Any help is appreciated. <div class=panchang-box-secondary-header> <div class="list-wrapper pl-2"> <div class="li ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup