Scroll clicked element to top of the window

Question

I need some help from jQuery geeks. this is my HTML code

<div class="activity-accordian activdesti-list">    
<div class="activity-box-wrap">
        <div id="headerone-hd"></div>
        <h3 data-subject="Header One" id="headerone" class="headerone-hd active-header">Header One</h3>
            <div id="headerone-wrap" class="categ-content">
                ...
            </div>
        </div>
        <div class="activity-box-wrap">
        <div id="headertwo-hd"></div>
        <h3 data-subject="Header Two" id="headertwo" class="headertwo-hd active-header">Header Two</h3>
            <div id="headertwo-wrap" class="categ-content">
                ...
            </div>
        </div>
        <div class="activity-box-wrap">
        <div id="headerthree-hd"></div>
        <h3 data-subject="Header Three" id="headerthree" class="headerthree-hd active-header">Header Three</h3>
            <div id="headerthree-wrap" class="categ-content">
                ...
            </div>
    </div>
</div>

This is js code which tried but didn't work

function _scrollTopHead() {
    $('.activity-accordian h3').on('click', function(e){
        var idName = $(this).attr('id');
        $('html, body').animate({scrollTop:$("#"+idName+"-hd").offset().top}, 'slow');
    });
}

I need h3 tag header to scroll top when that tag is clicked. (i.e if some one click h3 tag where id="headertwo" that h3 tag should scroll up and position in top of the browser. any help would appriciate

Thanks

You want it to scroll smoothly or direct jump would do. You can get that by just adding anchor tags Or check this. http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page — SSS, May 21 '14 at 10:21
Can you create a fiddle for it. Your function is wrong just try $('.activity-accordian h3').on('click', function(e){ var idName = $(this).attr('id'); $('html, body').animate({scrollTop:$("#"+idName+"-hd").offset().top}, 'slow'); }); in your document.ready — SSS, May 21 '14 at 10:23
@Aaron This is not a cloning elements mate. i need to scroll the page smoothly to the top of the browser depending on the clicked h3 element. Any way thanks for your answer — Thiwanka Dodanwela, May 21 '14 at 10:31
@Kamlesh Kushwaha! Sorry mate! i have written it for top most element which wrap all 3 element. its my mistake. still its not work as i wanted. any way thanks! — Thiwanka Dodanwela, May 21 '14 at 10:38
@ThiwankaDodanwela: your code works in that case then, check the updated answer. — K K, May 21 '14 at 10:45
@Kamlesh this is a part of some lengthy code. above this code there is a google map and slider as well. it works same. but that is not the way i want. hope you understand. Thanks — Thiwanka Dodanwela, May 21 '14 at 10:48

K K · Accepted Answer · 2014-05-21T10:44:55.733

4

Try this:

$('.activity-accordian h3').on('click', function (e) {
    var idName = $(this).attr('id');
    $('html, body').animate({
        scrollTop: $("#" + idName + "-hd").offset().top
    }, 'slow');
});

Demo: http://jsfiddle.net/GCu2D/139/

Updated the code.

edited May 21 '14 at 10:44

answered May 21 '14 at 10:33

K K

17,794
4
30
39

A.T. · Answer 2 · 2014-05-21T10:41:58.787

0

try something like this

$(document).on('click','h3[id="headertwo"]',function(ev){
    var body = $("html");
body.animate({scrollTop:0}, '500', 'swing', function() { 
   var clone = $(ev.target).clone();
  $('body').prepend(clone);
});

})

If you want to move h3 tag to top, then don't use clone simply prepend h3 tag to body tag.

Demo Fiddle

edited May 21 '14 at 10:41

answered May 21 '14 at 10:25

A.T.

24,694
8
47
65

Scroll clicked element to top of the window

2 Answers2