使用jQuery链接滚动到页面的一部分的有效方式

Question

我已经请求了关于滚动标识符的帮助，现在让这段代码完美运行：

http://codepen.io/vsync/pen/Kgcoa

然而，我想知道如何获得它，所以当我点击黑色滚动条上的链接时，我可以让它滚动到页面的那一部分。我认为这将是这样的：

$(".a1").click(function() {
    $('html, body').animate({
        scrollTop: $("#a1").offset().top
    }, 2000);
});

JavaScript的滚动识别位已经非常精致，我真的希望有一种优雅且优化的方式来实现它，以便它们也可以跳到页面的位。

Answer 1

试试这个。

$("nav span").click(function() {
    var sectionId = $(this).attr('class')
    $('html, body').animate({
        scrollTop: $('#'+sectionId).offset().top
    }, 2000);
});

Fiddle Demo