How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

Question

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

I'm currently working on creating a website for my friend who is a massage therapist.

Utilizing a bootstrap dropdown menu, I have added links to different treatments that direct to the treatment.html from the index.html page.

Is there a way to create multiple links using jQuery that will automatically scroll down to the specific treatment section on the new treatment.html page when there are multiple treatments available?

Apologies for any language errors. I am doing my best as English is not my first language.

I am quite inexperienced with JavaScript and jQuery, this being my first attempt at using them.

I came across this code snippet, but it doesn't seem to be working correctly:

<!-- Treatment scrolldown -->
$("html, body").animate({ scrollTop: $('#treatment1').offset().top }, 1000);

$("html, body").delay(2000).animate({scrollTop: $('#treatment1').offset().top }, 2000);
<!-- End Treatment scrolldown -->

javascript jquery html css

Answer 1

Answer №1

Consider trying out the code snippet below:

<div id="content">

    <ul>
        <li><a href="page1.html" data-section="section1" class="link-button">Page 1 Section 1</a></li>
        <li><a href="page1.html" data-section="section2" class="link-button">Page 1 Section 2</a></li>
        <li><a href="page2.html" data-section="section1" class="link-button">Page 2</a></li>
    </ul>

    <script>
        $(function () {

            $(".link-button").click(function (event) {
                event.preventDefault();

                var href = $(this).attr("href");
                var section = $(this).data("section");

                $("#content").load(href, function () {
                    $("html, body").animate({ scrollTop: $("#" + section).offset().top }, 1000);
                });

            });
        });
    </script>

</div>

Ensure that jQuery is included before the script for it to work correctly.

Answer 2

Consider trying out the code snippet below:

<div id="content">

    <ul>
        <li><a href="page1.html" data-section="section1" class="link-button">Page 1 Section 1</a></li>
        <li><a href="page1.html" data-section="section2" class="link-button">Page 1 Section 2</a></li>
        <li><a href="page2.html" data-section="section1" class="link-button">Page 2</a></li>
    </ul>

    <script>
        $(function () {

            $(".link-button").click(function (event) {
                event.preventDefault();

                var href = $(this).attr("href");
                var section = $(this).data("section");

                $("#content").load(href, function () {
                    $("html, body").animate({ scrollTop: $("#" + section).offset().top }, 1000);
                });

            });
        });
    </script>

</div>

Ensure that jQuery is included before the script for it to work correctly.

Answer 3

Answer №2

Don't forget, HTML comments cannot be used inside JavaScript.

Make sure to enclose your code with a script tag.

Remember to execute this within a self-executing function, such as the document ready event.

Additionally, don't forget to include jQuery before your script block.

For example:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
$(document).ready(function(){
    $("html, body").animate({ scrollTop: $('#treatment1').offset().top }, 1000);

    $("html, body").delay(2000).animate({scrollTop: $('#treatment1').offset().top }, 2000);
});
</script>

Lastly, be sure to check the browser console for any errors that may come up.

Answer 4

Don't forget, HTML comments cannot be used inside JavaScript.

Make sure to enclose your code with a script tag.

Remember to execute this within a self-executing function, such as the document ready event.

Additionally, don't forget to include jQuery before your script block.

For example:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
$(document).ready(function(){
    $("html, body").animate({ scrollTop: $('#treatment1').offset().top }, 1000);

    $("html, body").delay(2000).animate({scrollTop: $('#treatment1').offset().top }, 2000);
});
</script>

Lastly, be sure to check the browser console for any errors that may come up.

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

Answer №1

Answer №2

Similar questions

Delete the option to alter button in the Jasny file input tool

Including folders recursively using Node.js

I'm new to Angular, so could you please explain this to me? I'm trying to understand the concept of `private todoItems: TodoItem[] = []`. I know `TodoItem` is an array that

The picture above just won't stay within the div

Utilize the ::before selector to insert white spaces

Approach for checking duplicates or empty input fields through PHP, AJAX, and JavaScript

What is the best way to implement two distinct global CSS styles for separate pages in Next.js?

Tips on adding style to your jQuery autocomplete dropdown

"Counting the clicks on the filter button in React

Looking for some advice on tackling this JavaScript challenge - how can I effectively split an array?

Alternating CSS Designs for Displaying Multiple Mysql Query Results

Create a regular expression that matches a combination of alphabets and spaces, but does not allow for

Alert-Enabled Random Number Generation Tool

Listener document.addEventListener (function() {perform the function as shown in the illustration})

Implementing JavaScript functionality upon page load with ASP.NET

Encountered an issue while trying to extract data from state - property of null cannot

Placing jQuery in the lower part of my HTML templates lacks adaptability

Unique loading animations are assigned to each individual page within the Next.js framework

What is the best method to deactivate zoom in/out buttons using JavaScript?

The dimensions of the background for a span element