Question

是否可以滚动到具有特定ID和特定类的元素。例如，用于平滑滚动到特定id的简单脚本是

$(function () {
     $('a[href*="#"]').click(function () {
        var $target = $(this.hash);
        $target = $target.length ? $target : $('html');
        var targetOffset = $target.offset().top;
        $('html,body').animate({scrollTop: targetOffset}, {duration: 1500, easing: 'easeInOutCubic'});
        return false;
     });
});

如果您有类似

的内容，这非常有用

<div id="space-red"></div>
<div id="space-blue"></div>
<div id="space-green"></div>

但是，如果你有一个页面，如

<div id="space-red" class="class1"></div>
<div id="space-blue" class="class1"></div>
<div id="space-red" class="class2"></div>
<div id="space-blue" class="class2"></div>
<div id="space-green" class="class1"></div>

您是否可以通过区分他们分配给他们的班级来在两个space-red或space-blue ID之间导航？

Answer 1

ID必须是唯一的，请尝试将id更改为data-id，这是一个示例：

var target = $('div[data-id="space-red"].class2').offset().top;

console.log(target);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="space-red" class="class1"></div>
<div data-id="space-blue" class="class1"></div>
<div data-id="space-red" class="class2"></div>
<div data-id="space-blue" class="class2"></div>
<div data-id="space-green" class="class1"></div>

Answer 2

问题在于您使用类，就好像它们是 ID 和 ID 一样，就好像它们是类。这些ID对于整个文档是唯一的，因此应该只有一个。

你需要反思，逻辑才能正确。

Answer 3

首先，ID 必须是唯一的，但您可以使用类来控制和选择元素或其他属性。以这种方式，选择具有未标记类的元素，并在结尾添加标志。类似的东西：

$(function () {
 $('a[href*="#"]').click(function () {
    var $target = $(this.hash + ':not(.flag)');
    $target = $target.length ? $target : $('html');
    var targetOffset = $target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, {duration: 1500, easing: 'easeInOutCubic'});

    $('.flag').removeClass('flag');
    $target.addClass('flag');


    return false;
 });});

滚动到具有特定类的id

3 个答案: