CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tony Johannessen
Tony Johannessen

Reputation: 3

jQuery animate scrolldown to div by <a href""> From 1 html to another html site?

I'am on my way to make a site for my friend who is a massage therapist.

And I have a boostrap dropboxmenu with treatment-links to the treatment.html on the index.html.

How do I create multiple links that with jQuery make it scroll down to the specific treatment on the new treatment.html when having multiple treatments?

Sorry for bad english. Trying my best. I'am very very novice to javascript and jquery - first time actually..

I found this code, but it don't work?

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

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

Upvotes: 0

Views: 102

Answers (2)

devqon
devqon

Reputation: 13997

Try something like the following:

<body id="body">

    <ul>
        <li><a href="treatment1.html" data-section="section1" class="menu-button">Treatment1 section 1</a></li>
        <li><a href="treatment1.html" data-section="section2" class="menu-button">Treatment1 section 2</a></li>
        <li><a href="treatment2.html" data-section="section1" class="menu-button">Treatment2</a></li>
    </ul>

    <script>
        $(function () {

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

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

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

            });
        });
    </script>

</body>

Make sure you have jQuery included, and before the script.

Upvotes: 1

john Smith
john Smith

Reputation: 17906

first: you cant use html-comments inside js

second you need to wrap the ode by a script tag

third you have to run this in a self-executing function e.g at document ready event

fourth you need to include jquery before your script block

so sth like: 

<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>

and fifth: you should definatly check the browser console which will outup the errors you have

Upvotes: 0

Related Questions