Utilizing Jquery to automatically scroll to a specific div on page load by setting an

I am attempting to automatically scroll to the div specified in the URL. The URL may include one of 21 different IDs such as:

url.com/test#lite1

url.com/test#lite2

url.com/test#lite3

This scrolling action should happen when the page loads (so that users coming from an ebook can see the exact item they clicked on).

Below is the code I am currently using:

$(document).ready(function(){
    $('a[href^="#"]').load(function() {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top -150
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

</script>

The code is not functioning correctly, and I suspect it's due to this section (which I'm unsure about):

$('a[href^="#"]').load(function() {

Additionally, I want the scrolled-to div to be positioned in the center of the page (rather than at the top where browsers typically place it). Can you confirm if this adjustment is correct?:

$target.offset().top -150

Thank you for your assistance!

javascriptjqueryhtmlcss

Answer №1

window.location.hash holds the current hash value in the URL, so there's no need to manually add it if it's already present. If users are arriving at the page by clicking on a link with a hash, you can simply utilize this value.

$(document).ready(function(){
     $('html,body').animate({
          scrollTop: $(window.location.hash).offset().top-150
      }, 900, 'swing');
});

When working with WordPress, remember to use jQuery instead of $, resulting in the following code:

jQuery(document).ready(function(){
     jQuery('html,body').animate({
          scrollTop: jQuery(window.location.hash).offset().top-150
      }, 900, 'swing');
});

Answer №2

Looking for some jQuery plugins to enhance your website? Give these a try! I've used them in various projects and they always deliver smooth, customizable animations:

scrollTo (download, documentation) is great for scrolling to specific elements on a page. Just use: $(element).scrollTo(target);

localScroll (download, documentation) builds upon scrollTo and handles anchors smoothly. Apply it to a set of links by selecting their container: 

$('#link-container').localScroll();
, or activate it globally: $.localScroll();

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

Prevent a visitor from submitting the form again if it has already been submitted by the same visitor

Is there a way to prevent a visitor from submitting a form more than once? I've been thinking that cookies might be the solution. In my controller, I implement a cookie like this: class RatingsController < ApplicationController require 's ...

jqueryruby-on-railsajaxcookies

Can an image be allowed to overflow outside of a div without changing the div's size?

Starting Point I am in the process of designing a layout with Bootstrap 4. Here's a rough representation of what I am aiming for: https://i.sstatic.net/7QTpk.jpg And here is the basic structure: <div class="row"> <div class="col-12 c ...

htmlcsstwitter-bootstrapbootstrap-4

Creating an environment variable using the package.json script

I'm trying to set the process.env.ENV variable as either TEST or null using a script in my package.json file. The command below is not working when I run it through package.json (though it works fine when directly executed in cmd). script { "star ...

javascriptnode.jsnpmpackage.json

Issue with Kendo dropdown's optionLabel functionality malfunctioning

Check out the Kendo code snippet below for a dropdown control. I'm currently facing an issue where I am trying to display a "Please select" option in the dropdown. This code works perfectly fine for all other dropdowns except for this specific one. T ...

javascriptjquerykendo-ui

Utilizing CSS3 webkit-transitions with multiple properties on a div element along with multiple webkit-transition-delays

Is there a way to make a div slide 200px to the right and then reduce its scale by half separately? I want it to slide first and then scale, but currently both transformations happen simultaneously. I tried using webkit-transition-delay to set different ...

csswebkit

Encountering an Express.js HTTP 500 ERROR when using res.send("Some text"); is working on the page, however, the error occurs when trying to use res.render('file');

My website has a page located at /request that features a form. The form's method is POST and the action leads to /request. In the POST handler in request.js, the intention is to take action with the form data, like storing it in a database, and then ...

javascriptnode.jshttpexpressserver

Sending an AJAX request from one subdomain to another subdomain within the same domain

Is it true that cross-domain ajax requests require a 'proxy' server to be used? But what if an ajax request is made from server1.example.com to server2.example within the same domain of example.com? Would that still not work? I've noticed ...

javascriptajaxcross-domain

Controling attributes during the design process

Experimenting with a basic User Control in Visual Studio 2008: I've created a Panel called Wrapper with various controls inside. Will Visual Studio be able to handle this during the design phase? public partial class TestControl : System.Web.UI.UserC ...

cssvisual-studio-2008user-controlsdesign-time

Ensure that the control button is pressed during the JavaScript onclick event function

I am looking to create a JavaScript function that checks if the CTRL button is pressed. Here is my PHP code: <tr class="clickable" onclick="gotolink('<?= base_url() . invoices/createinvoice/' . $customer->Id; ?>')"> And here ...

javascriptphphtmlfunction

Adjusting the view of an OpenLayers3 map to encompass various vector layers

My OpenLayers3 map includes an OSM Tile layer and one or more Vector layers. I have a function that allows me to zoom into a single layer successfully: vector.addEventListener("change", function() { map.getView().fitExtent(vectorSource.getExtent(), ma ...

javascriptopenlayers-3

Protractor can now successfully locate and interact with a nested button element

I am trying to click on the second button, but I can't differentiate between the two buttons using class names. div class="ng-view ff-domain ng-scope"> <div class="hero-unit blur-background ng-scope"> <h1></h1> <h2> ...

javascriptangularjsseleniumselenium-webdriverprotractor

jQuery prioritizes enforcing style over using a CSS file

I am facing an issue with a nested div functioning similar to a drop-down menu. The problem arises when I click on the #two div as I want it to disappear. To handle this, I utilized jQuery and tried using both .hide() and .slideUp(). However, upon implem ...

jqueryhtmlcss

Creating PDF documentation in a JavaScript architecture MVC framework, specifically utilizing Backbone.js

In my project, I have implemented a Backbone Marionette single page application that interacts with a RESTful API backend using RoR. I am interested in providing users with the ability to export a PDF report that includes specific rendered views, regions, ...

javascriptruby-on-railspdfbackbone.jsreport

Pinia store encountering a Typescript Vue component issue: error message "The property 'testStore' does not exist on the 'CreateComponentPublicInstance' type."

Within my <script setup> block, I have imported my testStore. However, whenever I attempt to use this.testStore.name in my Vue file, Vetur displays the following error: Property 'testStore' does not exist on type 'CreateComponentPublic ...

javascripttypescriptpinia

Ways to verify if a value already exists in a pre-existing JSON file using Node.js

On the backend side, I have a json file containing addresses. From the client side, I am receiving a user's address through an API post method. My goal is to verify if the address provided by the user already exists in the JSON file. The addresses in ...

javascriptjsonnode.js

What is the best way to locate the closest element using JavaScript?

Is there a way to locate the closest object to the mouse pointer on a webpage? I have a hypothesis that involves utilizing the array function, however, I am uncertain if that is the correct approach. Furthermore, I lack knowledge of which specific proper ...

javascript

verified that all form checkboxes were selected in angularJS

Hey there, I have a form in AngularJS with multiple checkboxes. When the first checkbox (Check All) is clicked, I want all the checkboxes to be checked. How can I achieve this using Angular for each field loop? Below is a snippet of my code: vm.asas = f ...

htmlangularjsforms

Is the risk of using deprecated synchronous calls on the main thread worth it in JavaScript?

I have created a single page web application that relies on modifying a section of the page and then calling specific functions to format this section after it has been modified. One of the crucial post-modification calls I need to make is MathJax. Howeve ...

javascriptajaxmultithreading

Automatically trigger a page reload using a jQuery function

Currently facing an issue with jQuery. I created a drop-down menu and would like it to expand when the li tag within the menu is clicked. Even though I am using the jQuery click function successfully, there seems to be a problem where the webpage refreshe ...

javascriptjqueryhtmlcssclick

Python script for connecting to mWebSocket Server using WebSocket client

I am in the process of developing a WebSocket client using python that establishes a connection to an Arduino Uno via an Ethernet cable every second. The Arduino Uno is equipped with a WebSocket server using the mWebSocket library. The operational code for ...

pythonhtmlsocketswebsocketarduino