Question

我正在尝试使用滑动到同一页面上特定div的按钮。我之前已经能够在目标的另一个div具有特定id时使用href =“＃div_id”。

但是，我目前尝试定位的div只有一个类，我无法为该特定div添加id。

这完全是在wordpress中，因为我是全新的，我不知道如何通过javascript（必须挂钩到特定的按钮，并调用一个函数 - 这对我来说太复杂了）。

致以最诚挚的问候，并提前致谢

Answer 1

如果您可以使用JavaScript，则可以在页面的上传中执行此操作。（或者在身体的尽头，无论你喜欢什么。）

 document.querySelector('.yourclassname').id = 'yourchosenid';

其中yourclassname是div的类，yourchosenid是您要分配给它的ID。然后您可以像href="#yourchosenid"一样使用href。

请注意，yourclassname和yourchosenid必须是唯一的，才能实现此目的！

<a href="#insertidhere">click here</a>
<div>This is a filler. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="whateverclassyouhave"><strong>This is the intended target!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<script>
   document.querySelector('.whateverclassyouhave').id = 'insertidhere';
</script>

Answer 2

您无法将网址设为class，因为类可能会应用于多个元素，而id会定义唯一元素。

当class元素符合您的要求时，您可以尝试使用JavaScript覆盖类上的单击行为。

Answer 3

按类定位元素不是非常可靠的解决方案，除非您小心使用它们而不重复它们。我会在jQuery中建议类似的东西：

$('.js-scroll').on('click', function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('html, body').animate({
        scrollTo: $(target).offset().top
    }, 600);
});

并在JS文件中：

{{1}}

通过这种方式，您可以平滑地滚动到所需的元素。

Href到特定div（在同一页面上），只有一个类

3 个答案: