Question

我有一个似乎要解决的简单问题，但无法使用类而不是href来获得正确的格式

我希望能够点击一个带有.mtimg类的a

当点击任何一个项目时，因为父DIV内部有一些“page_menu”类，我只想滚动到那个DIV的顶部。

所以，快速而简单....点击.mtimg滚动到div.page_menu div的顶部

我最初的想法但无法使用类而不是href ..

$('a[href^="#"]').on('click', function(event) {

    var target = $(this.href);

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});

Here is my Fiddle

Answer 1

因为我不知道'a'指示父是'div.menu_page'我使用jQuery的.closest（）否则你可以使用$（this）.parent

$(function(){
    $(".mtimg").on("click", function(event) {
        event.preventDefault();

        //var $parent = $(this).parent();
        var $parent = $(this).closest('div.page_menu');

        var topToScrollTo = $parent.offset().top;

        $("html, body").stop().animate({ scrollTop: topToScrollTo}, 1000);
    });
});

这应该是它。

Answer 2

您可以这样做：

$('.mtimg').on('click', function(){
    var $target = $(this).parents('div.page_menu').first();
    $('html, body').animate({ scrollTop: $target.offset().top }, 1000);
});

Answer 3

如果您希望每次单击具有page_menu类的元素时滚动到mtimg div的顶部，它可以简化很多。请参阅下面的最小示例。

修改修改了示例以使用OP提供的标记。

$(document).ready(function() { $('.mtimg').on('click', function(event) { event.preventDefault(); $('html, body').animate({ scrollTop: $('.page_menu').offset().top }, 1000); }); });

/*CSS for display purposes*/ .page_menu { border:solid 1px red; padding:20px; } .mtimg { padding:4px; background-color:#e1e1e1; margin:2px; cursor:pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='page_menu'> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> <div class='mtimg'>Class Item</div> </div>

使用jQuery在单击CSS类元素时滚动到顶部

3 个答案: