Question

我需要jQuery极客们的帮助。这是我的HTML代码

<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>

这是尝试但无效的js代码

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

单击该标记时，我需要h3标记标题滚动顶部。（即如果有人点击h3标签，其中id =“headertwo”，h3标签应向上滚动并位于浏览器顶部。任何帮助都会适用

谢谢

Answer 1

试试这个：

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

演示：http://jsfiddle.net/GCu2D/139/

更新了代码。

Answer 2

尝试这样的事情

$(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);
});

})

如果你想将h3标签移到顶部，那么不要使用clone只是将h3标签添加到body标签。

Demo Fiddle

滚动单击元素到窗口顶部

2 个答案: