CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steve
Steve

Reputation: 8293

Scroll To same position on page depending on which element is clicked

Is it possible to have the title of my div scroll to the top of the page for multiple divs?

For example: If I click on a person I would like them to scroll to the top of the page. So their image would be at the top and you are able to read their description. Currently if you click on the bottom image you do not notice the description, as it's below the page.

Fiddle here: http://jsfiddle.net/sPLDh/5/

HTML:
<p>Our people Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>


<div class="people">

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>John doe</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Peter Pan</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Sally Hills</h2>
    </div>

    <p>John Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Peter Pan is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sally Hills is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>Betty Boo</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Sm Hunt</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Paula Walls</h2>
    </div>

    <p>Betty Jones Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sam Hunt is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Paula Walls is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

</div>

Upvotes: 0

Views: 85

Answers (4)

StackSlave
StackSlave

Reputation: 10627

href='#elementName' should do the job if you use an anchor. This will just go there instantly, though.

Upvotes: 0

imbondbaby
imbondbaby

Reputation: 6411

Try this:

$('.person img').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('html,body').animate({scrollTop: $(this).offset().top},'slow');
    var index = $('.person img').index(this);
    $('.people p:visible').fadeOut('fast','linear').promise().done(function() {
        $('.people p:eq('+index+')').fadeIn('fast','linear');
    });
});

Explanation:

scrollTop() - position of scrollbar for element (window/div/anything scrollable).

$("#element").offset().top - position of element relative to page.

JSFiddle Demo

Note: Also, added float:left; in .people p to keep the text on the left.

Upvotes: 1

mohammadreza berneti
mohammadreza berneti

Reputation: 530

u can use jquery scrollTop and add this function to click event :

$('html, body').animate({
scrollTop: ($(this).offset().top - 5)
}, 1000);

Upvotes: 0

meni181818
meni181818

Reputation: 1101

nice little jquery plugin for that:

$.fn.animateScrollToElement = function(speed, marginTop) {
    marginTop = marginTop || 0;
    $('html, body').animate({
        scrollTop: $(this).offset().top - marginTop
    }, speed);
    return this;
}

usage:

// element                     speed, 'margin top'
$( this ).animateScrollToElement(1000, 20);

http://jsfiddle.net/sPLDh/11/

Upvotes: 0

Related Questions