jQuery Scroll To 如何使用

Question

How can I use jQuery

to this:

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#home">Home <span class="sr-only">(current)</span></a>
    </li>
    <li><a href="#grid" class="scrollto">Grid System</a>
    </li>
    <li><a href="#tooltips" class="scrollto">Tooltips</a>
    </li>
    <li><a href="#tables" class="scrollto">Tables</a>
    </li>
    <li><a href="#carousel" class="scrollto">Carousel</a>
    </li>
    <li><a href="#thumbnails" class="scrollto">Thumbnails</a>
    </li>
    <li><a href="#forms" class="scrollto">Forms</a>
    </li>
</ul>

Here's the JSFIDDLE

How can it also highlight the active div selected? (ul li a)

Answer 1

The suggestion would be, first to give id's to the links:

<a href="#tables" id="link1">Tables</a>

and then use:

$('#link1').scrollTo(document.getElementById('tables'), 800);

as the documentation mentions.

Link to documentation and demos:

http://demos.flesler.com/jquery/scrollTo/

Answer 2

In this particular case you want to scroll to the href on the links, in jQuery you could do this simply with your current setup, without scrollTo which seems redundant to me.

$(document).ready(function(){ //ready
    $(".scrollTo").click(function(e){
        e.preventDefault();//don't execute click event (Actually going to anchor)
        var element = $(this);
        var elementOffsetTop = $(element.attr("href").offset().top;
        $(body).scrollTop(offset);
    })
});

Alternatively, if you want an animation, replace

$(body).scrollTop(offset); 

with

$(body).animate({scrollTop: offset}, 500);

This, would of course make all your ".scrolltop" links work straight away, without libraries besides jQuery.

Answer 3

Jquery animate():

You can achieve this using the jquery animate(). Use the scrollTop and set the property likewise:

$("html, body").animate({ scrollTop: $(document).height() }, 1000);

If you are looking to scroll to a specific target, then modify the scrollTop property likewise: ( You will have to add an ID or class to your nav ul )

$("html, body").animate({ scrollTop: $("#targetID").scrollTop() }, 1000);

jQuery animate docs

Demo

Hope this is helpful.

Answer 4

If you are using Bootstrap, it comes with a plugin ScrollSpy .

Or try this code.

$('#collapse-here .nav li a').on('click', function(e){
    e.preventDefault();
    var thisUrl = $(this).attr('href');
    $("html, body").animate({ scrollTop: $(thisUrl).offset().top }, 1000);
    $(this).parents('li').addClass('active');
    $(this).parents('li').siblings('li').removeClass('active');
});

See Updated CODE - https://jsfiddle.net/rxn04stn/12/