javascript - Javascript/Jquery 使 Anchor 链接到特定类的第一个实例......？

Question

我的大脑被炸了，我无法解决这个问题。我绝对是编程的新手。

在我的页面中，我有一个按字母顺序显示的动态生成的名称列表。每个姓氏以“A”开头的人都会获得 CSS 类“letter_A”。每个姓氏以'B'开头的人都会获得css类'letter_B'等等......

我在页面顶部有一个锚链接列表（A - B - C - D - E - F - G - H - I 等等），我想跳到第一个项目（名称）一个特定的类。所以锚链接“A”会跳到第一个具有“letter_A”类的项目。锚链接“B”将跳转到第一个具有类“letter_B”的项目，依此类推。

使用javascript（或jquery）编写这个的最佳方法是什么？

Answer 1

这应该做的工作：

$("a").click(function(){
    var firstItem = $(".letter_" + $(this).text()).first();
    var top = firstItem.offset().top;
    $("body,html").scrollTop(top);
});

Answer 2

我累了，现在不应该写答案，但你可以试试这样的

$("a").click(function(e) {
    e.preventDefault();
    var offset = $('.letter_' + $(this).attr('href') + ':first').offset().top;   // find the scroll position of the class with letter_(whatever you clicked on)
    $('html, body').animate({ scrollTop:offset }, 300);  // scroll to that position
});

Answer 3

适用于纯 HTML

你真的不需要 jQuery 或 JavaScript。您可以使用简单的命名锚：

<a href="#B">B Names</a> <!-- Clicking me... -->
...
<a id="B">               <!-- Will scroll down to me. -->

JavaScript / jQuery 方法

如果您需要使用 jQuery，则可以使用以下方法：

// Bind to all <a href="#B">B</a> within <ul class="letters">
$(".letters").on("click", function(e){
  e.preventDefault();
  // Ease the body's scrollTop value to our first matched letter
  $("body").animate({
    scrollTop: $(".letter_" + this.innerHTML).position().top
  }, 2000);
});