Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header.

Is there a way to adjust the scroll position by a certain number of pixels using plain JavaScript or CSS? Or perhaps there is a more elegant JavaScript solution that can work seamlessly across IE11, Edge, Chrome, and FF?

<header> ... </header> <!-- site-wide sticky header using position:sticky -->
<main>
  <nav> <!-- page-specific sticky nav using position: sticky (placed under <header />) -->
    <a href="#top">Top</a>
    <a href="#bottom">Bottom</a>
  </nav>
  <div class="content">
    <section>
      <a id="top"></a>
      ...
      ...
      ...
    </section>
    ...
    <section>
      <a id="bottom"></a>
      ...
      ...
      ...
    </section>
  </div>
</main>
javascripthtmlcssscrollanchor

Answer №1

To adjust the anchor's position based on the header heights, modify the top property as shown:

header {
  position: sticky;
  top: 0; /* adjusted value */
  background: yellow;
}

nav {
  position: sticky;
  top: 40px; /* adjusted value */
  background: red;
}

section > a {
  position: relative;
  top: -60px;
}

section > div {
  height: 500px;
  width: 100%;
}

#topDiv {
  background: blue;
}

#bottomDiv {
  background: green;
}
<header> ... </header>
<main>
  <nav>
    <a href="#top">Top</a>
    <a href="#bottom">Bottom</a>
  </nav>
  <div class="content">
    <section>
      <a id="top"></a>
      <div id="topDiv" style="height: 500px; width: 100%" >
        Content
      </div>
    </section>
    <section>
      <a id="bottom"></a>
      <div id="bottomDiv" style="height: 500px; width: 100%" >
        Content
      </div>
    </section>
  </div>
</main>

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

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

I need to display selected values of a tree structure in a show box on the other side of the page using code. However, I also need to include HTML input boxes in some lines of the tree structure so that users can input data. The challenge is getting the in ...

javascriptjqueryhtmlcss

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

Referring to this discussion on Stack Overflow: AngularJS trigger and watch object value change in service from controller The original question was about watching for changes in a service from a controller. I am interested in extending this concept to ...

javascripthtmlangularjs

Utilizing CSS to create dynamic 3D cube transformations

Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...

htmlcss3d

The function onKeyDown is not working properly

I am currently working with a Material-UI Table and have the following code: <Table onKeyDown={event => console.log(event)}> <TableBody> ... </TableBody> </Table> Despite having the onKeyDown event listener set up, I a ...

javascriptreactjshtml-tablekeyboardmaterial-ui

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

javascriptjqueryhtml

What is the process for setting a default value in an array using Angular and then showcasing that value in a textbox?

I have been working on creating a form that includes a feature to dynamically append new rows. While I am able to successfully create new rows dynamically, I am facing an issue with displaying the initial values in my textboxes. Below is a snippet of my c ...

javascriptangularjs

AngularJS and adding to an array in the routing process

I'm currently working on creating a contact list with two different views. One view displays all the contacts and includes an option to add a new contact, which is represented by a button rather than a space to input information directly. The other vi ...

javascriptangularjsangular-ui-router

Attempt to resend email if unsuccessful

I have implemented nodemailer in my node application for sending emails. However, I am encountering an issue where the email sometimes fails to send and generates an error message. Typically, it takes two or three attempts before the email is successfully ...

javascriptnode.jsexpressnodemailer

Populate an AngularJS select dropdown with JSON data and automatically pre-select the specified value

I am currently dealing with 2 entities: project and project_types. Each project can have one or multiple project_types associated with it. Using ajax (ng-init), I am retrieving the project data (including its related project_types) and all available proje ...

javascriptangularjsjson

Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...

cssreactjswebpacknext.jscss-houdini

When trying to apply styles using ng-style attribute with jQuery, Angular does not seem to

Check out this plunker showcasing the issue : http://plnkr.co/edit/1ceWH9o2WNVnUUoWE6Gm Take a look at the code : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { console.log('yeah'); ...

javascriptjqueryangularjs

Determining the character encoding of a JavaScript source code file

For my German users, I want to display a status message with umlauts (ä/ü/ö) directly in the source file instead of requiring an extra download for messages. However, I'm having trouble defining the encoding for a JS source file. Is there a way si ...

javascriptunicodeencoding

What is the functioning process of the angular method decorator?

The tutorial on creating custom decorators in Angular introduces a throttle decorator that utilizes the lodash throttle function. The implementation of this decorator can be seen below: import t from 'lodash.throttle'; export function throttle( ...

javascriptangularangular-decorator

Best practice for retrieving the $scope object inside the ng-view directive

Check out my plunk. Incorporating ngRoute into my project. I want to increase a value using ng-click, and upon clicking "Show total", the ng-view template should display the updated value. However, it seems like the scope is not being accessed as expecte ...

javascriptangularjsangularjs-scopeng-view

Plugin for turning text into "leet speak" using jQuery and Javascript

Recently, I've been on the hunt for a 1337 translator that I can seamlessly integrate into a jQuery plugin. While I believe I'm making progress, I can't shake off the feeling that something's amiss. My gut tells me that what I currently ...

javascriptjqueryhtmljquery-plugins

Utilizing the indexOf Method in AngularJS

Here is my array: emp=["111","56"]. This is the code I have: <input type="text" placeholder="Enter" class="form-control" name="Emp" ng-model="myModel.Emp" ng-required="currentStep ==2"/> <input type="text" placeholder="Enter" class="form-contro ...

javascriptangularjsjson

Ways to retrieve an input field value without triggering form submission

I'm currently working on a payment form where users input the amount in a text field. I also have another text field on the same form that should automatically display the amount in words based on the user input. However, I'm struggling to figure ...

javascriptphphtml

Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

I have developed a script that intercepts Captcha form submissions. Typically, when the form is submitted, a file will be downloaded (such as exe or zip) in the usual way where it appears at the bottom of the Chrome browser and gets stored in the "download ...

javascriptajax

Encountering a syntax error with JSON.parse() when using MVC 4 Razor with Jquery Ajax

I am encountering an issue with my MVC 4 application login page. I am attempting to utilize a jQuery ajax request to my login controller to check if the user exists. Here is the snippet of my jQuery code: $(document).ready(function () { $("#btnSub ...

javascriptjqueryajaxasp.net-mvcjson

Is the callback of $.post not being executed until the loop it's contained in finishes?

I'm working on a stock table that allows users to input the quantity of stock to issue. I have a function that verifies whether or not the database has sufficient stock for each entry in the table. When debugging through the code in Chrome, I noticed ...

javascriptphp.post