CODEWITHSUNDEEP
jqueryhtml
Body
Body

Reputation: 3688

Look for nearest link

I have a single page scrolling website with 7 pages and each page is around 1000px in height. My menu structure goes like this,

<a href="#home" class="home">Home</a>
<a href="#about" class="about">About</a>
<a href="#team" class="team">Team</a>
<a href="#contact" class="contact">Contact</a>

By clicking a link, It will scroll to the respective ID assigned to the section.

I also having a small position fixed button with 2 arrows pointing up and down. 

<div class="button">
    <i class="go-up"></i> //up arrow
    <i class="go-down"></i> //down arrow
</div>

I want to navigate to the closest section by clicking the arrows. For an example assume I'm inside the #team, so When I click the .go-up it should navigate to the #about and .go-down should go to #contact. Also after moving to the #contact again this should identify the new closest targets.

Please help me do this in jQuery.

Upvotes: 0

Views: 254

Answers (3)

David Thomas
David Thomas

Reputation: 253368

Assuming you have mark-up like the following:

<a href="#home" class="home">Home</a>

<a href="#about" class="about">About</a>

<a href="#team" class="team">Team</a>
<a href="#contact" class="contact">Contact</a>

    <div>
        <div id="home">
            <p>Some content in 'home.'</p>
            <div class="button">
                <i class="go-up">&uarr;</i>
                <i class="go-down">&darr;</i></div>
        </div>
        <!-- other sections omitted for brevity -->
    </div>

I'd suggest:

$('.button i').click(
    function(){
        var mvTo = $(this).closest('div[id]')[$(this).hasClass('go-up') ? 'prev' : 'next']().offset(),
            x = mvTo.left,
            y = mvTo.top;
        window.scrollTo(x,y);
    });

JS Fiddle demo.

References:

Upvotes: 2

Pedro Estrada
Pedro Estrada

Reputation: 2404

I would use a class flag.

e.g. using the class current on the links.

$('.button i').click(function () {
    var $anchor = $('.current');
    var direction = $(this).prop('class');

    if (direction == 'go-up' && $anchor.prev().length > 0) {
        $('a').removeClass("current");
        $anchor.prev().addClass("current");
        $('html, body').stop().animate({
            scrollTop: $($anchor.prev().attr('href')).offset().top
        }, 1500);
    } else if (direction == 'go-down' && $anchor.next().length > 0) {
        $('a').removeClass("current");
        $anchor.next().addClass("current");
        $('html, body').stop().animate({
            scrollTop: $($anchor.next().attr('href')).offset().top
        }, 1500);
    }

});

then you can locate the current one using $('.current')

and use .prev() and .next()

http://jsfiddle.net/PhckT/1

Upvotes: 1

Marcky
Marcky

Reputation: 129

Since you mentioned to help you find a solution using jQuery, here's a solution :

go up could be something like :

$('.button > .go-up').on("click",function(){
     var container = $("#mainPageContainer");
     var prevElement = container.prevAll('.aClassToPutOnPageContent:first');
     container.scrollTo(prevElement);
  });

and go down could be : 

 $('.button > .go-down').on("click",function(){
     var container = $("#mainPageContainer");
     var nextElement = container.nextAll('.aClassToPutOnPageContent:first');
     container.scrollTo(nextElement);
  });.

Also see This link for a good content content scrolling plugin!

Source : How to use jquery next() to select next div by class

But maybe next time try searching a little bit more! It took me about 20 seconds to find my source. (;

Good luck and have fun,

Marc.

Upvotes: 1

Related Questions