CODEWITHSUNDEEP
javascriptjqueryhtml
jv96
jv96

Reputation: 29

Scroll to javascript

So this is what I have as my top nav bar. I'm using this along with jquery

        <nav>
            <div class="brand">BRAND</div>
            <ul>
                <li><a id="home" href="#home">Home</a></li>
                <li><a id="about" href="#about">About</a></li>
                <li><a id="buy" href="#buy">Buy</a></li>
                <li><a id="contact" href="#contact">Contact</a></li>
                <li><a id="login" class="active" href="#">Log In</a></li>
            </ul>
        </nav>

and i'm trying to use this line of code to have it when clicked on one of the options on my nav bar to scroll to that element

        $("nav a").on("click", function(e) {
            e.preventDefault();
            var section = $(this).attr("href");
            $("html, body").animate({
                scrollTop: $(section).offset().top
            }, 850);
        });

but it isn't working?

Upvotes: 0

Views: 57

Answers (2)

mooga
mooga

Reputation: 3317

You have to put the id to thelement you want to scroll to not the link itself

        $("nav a").on("click", function(e) {
            e.preventDefault();
            var section = $(this).attr("href");
            $("html, body").animate({
                scrollTop: $(section).offset().top
            }, 850);
        });     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
            <div class="brand">BRAND</div>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a  href="#about">About</a></li>
                <li><a  href="#buy">Buy</a></li>
                <li><a  href="#contact">Contact</a></li>
                <li><a  class="active" href="#">Log In</a></li>
            </ul>
        </nav>
        
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div id="home">
        example
        </div>

Upvotes: 1

user149341
user149341

Reputation:

You've put the ids on the wrong elements. Each of your links is set to target itself -- so the browser scrolls to the link that was just clicked, which is already visible.

Place id="…" on the element that you want to scroll to, not the link.

Upvotes: 0

Related Questions