Slide up to 100 pixels above the anchor using jQuery

I am looking for a solution where the anchor position is 100px below the top of the page instead of jumping to the very top. I prefer not to have any animations, and I want to avoid the anchor jumping twice.

I am seeking a universal fix for this issue.

I have attempted the following code but it doesn't seem to be working...

$("a.inpage").click(function (e) {
    e.preventDefault();
    $(":target").each(function () {
        var targetpos = $(this).position();
        var scrollpos = targetpos.top - 100;
        window.scrollTo(0,scrollpos);
    })
}

Thank you, David

javascriptjqueryhtmlcss

Answer №1

The :target CSS3 selector is designed to match an element whose id matches a part of the URL. However, when using ev.preventDefault(), it prevents the link from being followed and the URL from changing.

A more effective approach would be something like this:

$("a.inpage").click(function (e) {
    e.preventDefault();
    var targetpos = $($(this).attr('href')).position(); // take note of this line
    var scrollpos = targetpos.top - 100;
    window.scrollTo(0,scrollpos);
}

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

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

javascripthtmlcssanime.js

How can I defer Tween.js animation in three.js until a button is specifically clicked?

I am trying to implement a tween animation for my camera in three.js that should only start when a specific object is clicked. This object can be within the scene or it could be a simple HTML button. The code snippet below demonstrates how the camera anima ...

javascriptthree.jstweentween.jstweenjs

Please do not exceed two words in the input field

I need to restrict the input field to only allow up to two words to be entered. It's not about the number of characters, but rather the number of words. Can this restriction be achieved using jQuery Validation? If not, is there a way to implement it u ...

javascriptjqueryhtmljquery-validate

Can data be transferred from node.js express to front-end HTML without requiring a page refresh?

Currently, I have developed a webpage that showcases all meetings with collapsible accordions. Initially, all the meetings are collapsed. However, when the user clicks on the meeting button (labeled as 'Audio' in the screenshot), a request contai ...

htmlnode.jsexpressaccordion

Unable to find a bootstrap dropdown component using Python in Selenium

I am currently facing an issue trying to find a dropdown menu and select an option. Below is the code snippet I have been using for this task: from selenium import webdriver driver=webdriver.Chrome(r"C:\Users\nithi\Downloads\chrom ...

pythonhtmlselenium

Is there a way to create a clickable component for triggering an AJAX call without using a Submit button?

Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...

javascriptjqueryhtmlajax

Display a fancy slideshow that transitions to five new images when the last one is reached

Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Ionic2 http post request is missing the 'Access-Control-Allow-Origin' header

Here is the complete code snippet: this.http.post(link, data, { headers: headers }) .map(res => res.json()) .subscribe(data => { this.data.response = data._body; }, error => { console.log("Oops! An error occurred"); ...

javascriptangularjsionic2

Encountering an error with my JSONP call

Similar Question: json with google geocoding api json Uncaught SyntaxError: Unexpected token : $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=true&callback=?', function(data) { ...

javascriptjquery

"Encountered an issue: Error occurred while attempting to synchronize Protractor with the page" during the execution of Protractor tests

I am facing an issue while running Protractor tests on a web application that includes both Angular and non-angular elements. Here is the structure of my code: describe("Test Name", function() { it("Test case", function() { // starting with steps on ...

javascriptnode.jsangularjsangularprotractor

Transfer the chosen language from the uib-dropdown language selector to the $scope variable

Here is a HTML template that allows the user to select a language: <div class="btn-group" uib-dropdown> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle> ...

javascriptangularjsangular-ui-bootstrapangular-ui

Even after applying the CSS property "resize:none" to my HTML textarea, I still find it to be adjustable in size when viewed in the Opera browser

I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size. I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in ...

csshtmlthymeleaf

I must duplicate a pattern to accommodate various object dimensions

Let me clarify something. I am faced with the challenge of handling multiple textures, and I already know which method to employ for this task. The solution I identified was to use UV mapping on geometries to repeat textures. However, the issue I'm ...

javascriptthree.js

Optimizing background images for various mobile devices using PhoneGap

Currently in the process of creating a cross-platform app for iOS and Android using Phonegap. Facing an issue with implementing a background-image as it gets cropped or distorted on various mobile devices due to size differences. Managed to address this ...

androidioscsscordovaphonegap-build

Upgrade the old website by incorporating some components of the Framework CSS

Having experience with bootstrap, semanticUI, foundation, and other frameworks, my new project involves adding features to an existing website without rebuilding it entirely. I am looking to implement a partial view using a framework's CSS. How can I ...

htmlcsstwitter-bootstrapzurb-foundationsemantic-ui

Do we need to use the render method in ReactJs?

I'm curious about how ReactJs uses its Render() functionality. Let's say we have some HTML code within index.html: <section id="Hello"> <h1>Hello world</h1> <p>Something something Darkside</p> </section&g ...

javascriptangularjsreactjs

Is there a way to remove a row through fetch using onclick in reactjs?

I'm completely new to this and struggling with deleting a row using fetch. I've written some messy code and have no idea if it will even work. Please help, I feel so lost... renderItem(data, index) { return <tr key={index} > &l ...

javascriptreactjsweb

Angular is able to select an element from a specified array

I'm currently struggling with using Angular to manipulate a TMDB API. I am having difficulty retrieving an item from an array. Can someone provide assistance? Here is the response that the array returns: { "id": 423108, "results ...

javascriptangularapi

IE11 not processing jQuery ajax response correctly

While creating a login page using jQuery/AJAX, my code is functioning perfectly on all browsers except for IE11. In IE11, I am encountering the following exception: SCRIPT7002: XMLHttpRequest: Network Error 0x800c0008, The download of the specified resour ...

javascriptjqueryajaxinternet-explorer-11

Identifying a touch event-related bug specific to a device and browser on iOS that is passive in nature

In my project, I have observed a peculiar behavior that only occurs on specific devices and browsers. The desired behavior involves using Device Orientation Controls (Three.js) for users to "look around" and utilizing this virtual joystick library for mov ...

javascriptiosgoogle-chromethree.jssafari