Animated scrolling does not function properly with external links that are fully qualified

Currently, I am working on the website julebord.bedriftsdesign.no and have added animated scroll functionality to this page:

However, I have encountered a problem. The animated scroll works perfectly fine when using internal anchor links like (#myanchor). But when the link is in this format , it doesn't work.

I need both types of links to function correctly, but I'm struggling to figure out how to make that happen. Do you think I need to make changes to the JavaScript I'm using?

If anyone has any insights or suggestions on this issue, I would greatly appreciate it. Thank you.

javascriptjqueryhtmlcsssmooth-scrolling

Answer №1

It seems like the current script won't function properly because the scroll is activated by a click event and not on page load.

One potential solution could be to detect the URL hash during the page load and then manually simulate a click event, which in turn would trigger the scroll.

You may try implementing something similar to the following (please note that this code has not been tested on your specific webpage and may require adjustments):

if(window.location.hash) {
  $('a[href="#'+window.location.hash.substr(1)+'"]').trigger('click');
}

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

I often find myself frustrated while using Next.js because the console automatically clears itself, making it difficult for me

I am facing an issue with my form in the Next.js app. Here is how it is defined: <form onSubmit = { async() => await getCertificate(id) .then(resp => resp.json()) .then(data => console.log(data)) }> Whenever there is an erro ...

javascriptreactjsnode.jstypescriptnext.js

Transferring Data between Rails and Angularjs using JSON

Utilizing Angularjs to fetch JSON data from a Rails test app deployed on Heroku is proving to be a bit challenging. Below you can find the snippets of my Angular and Rails code. An error message displayed in my Firebug console reads: "NetworkError: 404 N ...

javascriptruby-on-railsjsonangularjsheroku

Is there a way to first run my validate function and then proceed with sending my AJAX request upon clicking a button?

Hey there! I've got a dynamic table generated from a database. You can check out the table. I have all the necessary code in place, but what I really need is to ensure proper timing of execution for specific actions: 1) Verify if all mandatory fields ...

javascriptjqueryajax

Mismatched Background for Active Links in HTML/CSS Menu

My HTML menu has a unique feature that highlights the currently active page using a specific class. <div id="menu"> <ul> <li class="activelink"><a href="index.html">Home</a></li> <li><a href ...

htmlcss

Reveal or conceal the footer section as you reach the end of the webpage

My webpage layout consists of a fixed nav-bar at the top, a drop down sidebar, a <div> element with an id of content, some content inside the <div>, and a bottom <div> with a fixed position. I am trying to hide the bottom <div> whe ...

javascripthtmljquerycssscroll

An issue arises when trying to group and sum an array of objects due to difficulty converting strings to arrays in TypeScript

Below is the provided code snippet: Definition of Interface - interface IWEXInterface { readonly Date?: string; "Exec Qty"?: string; readonly Expiry?: string; } Data Collection - let data: IWEXInterface[] = [ { Date: &qu ...

javascripttypescript

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

htmlcssangulartypescriptcss-selectors

Using JavaScript to assess the outcome of a form utilizing an if statement

Trying out a method to assess a result by utilizing an if statement on the form provided below. Upon dividing the 2nd result by the 1st result, an average percentage is calculated. If this percentage is equal to or higher than 55, then the outcome is label ...

javascriptjqueryforms

Tips on creating two columns with varying backgrounds and spacing on the left and right sides in Bootstrap

I am in need of assistance to create a website top bar similar to the image provided at this link: https://i.sstatic.net/wfc1w.jpg The first column should display color-1, while the second column should showcase color-2. I want an angled design between th ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing Robot Framework to select CSS attributes

The Selenium documentation provides an example of how to use Get Element Attribute: ${id}= Get Element Attribute css:h1 id However, I encountered a problem with this selector: ${VISIBILITY}= Get Element Attribute css:visibility mySidebar I ...

cssseleniumcss-selectorsrobotframework

How to use a loop to alternate CSS classes in HTML?

Here is a sample code using a while loop: while($fetch = $stm->fetchAll()) { echo '<tr class=""'>; echo '<td>' . $fetch['name'] . '</td>'; echo '</tr>'; } I want to ...

phpcss

Preventing Broken URLs in Jquery each

What is the best way to prevent taking images with broken URLs? jQuery.each(jQuery('img'), function(index, obj) { imageStack.add(jQuery(obj)); }); ...

javascriptjquery

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

htmlcssbootstrap-5

What could be causing the information from the ajax call to not appear in this popover?

Hovering over a link will trigger a popover with a 1 second delay containing user profile information, loaded using AJAX. $(function() { var timer = null; var xhr = null; $('.user_popup').hover( function(event) { ...

javascriptbootstrap-4

How to use Javascript to clear a dropdown list and checkboxes

I need help resetting multiple form fields - a textbox, drop down list, and check box - when the reset button is clicked. Currently, my code only resets the textbox value, but I also want to reset the drop down list selection and uncheck the checkbox. Here ...

javascriptc#html

Display the variable on the document by clicking the button

Hello, I'm new here so please forgive me if I make any mistakes. I am working with the following PHP code: <?php $quoteFile = "quotes.txt"; //Store quotes in this file $fp = fopen($quoteFile, "r"); //Open file for reading $content = fread ...

javascriptphpprintingecho

What steps can be taken to turn this html code and css into a mobile application?

I have begun working on my HTML and CSS but need some guidance to create a mobile app without needing to resize it when accessed through the web. Additionally, I would like to make it responsive in CSS. Can you provide me with the necessary code? @c ...

htmlcss

Error: It is not possible to access the 'map' property of an undefined value 0.1

I'm currently experimenting with React.js and I encountered an error that's giving me trouble. I can't seem to pinpoint the root cause of this issue. Shout out to everyone helping out with errors: TypeError: Cannot read property 'map ...

javascriptreactjs

Error occurs in Windows script while running a project installed globally

Upon installing my project globally, I encountered a Windows Script Host error. https://i.stack.imgur.com/unFVu.png What steps can I take to resolve this issue? The following is my JavaScript code snippet: Object.defineProperty(exports, "__esModule ...

javascriptnode.jswindowstypescriptnpm

Refresh Django table data without the need to reload the entire page

In order to retrieve data in my view, I use the following code: order = Order.objects.filter(owner=request.user).order_by('-id')[:10] The template code below works perfectly fine. However, I am looking to dynamically update this table every 10 ...

jqueryajaxdjango