时间戳

首页 > 解决方案 > 使数据属性表现得像一个锚

javascript - 使数据属性表现得像一个锚

问题描述

有没有一种可行的方法让数据属性表现得像一个锚？

考虑以下可能的情况：

<a id="link" href="#home">

<div data-section="home">

是否有可能以某种方式将锚标记绑定到具有相同命名数据属性的 div？

这不起作用，但有点像：

$("#link").click(function(e) {
    var clickedLetter = $(this).attr('href');
    $(this).attr("href", "#section[data-group='" + clickedLetter + "']")
});

标签： javascriptjqueryhtmlcustom-data-attribute

解决方案

kawnah，在我看来，您需要获取单击元素的 href

var clicked = $(this).attr('href');

之后，您可以使用替换功能并获取不带标签符号 (#) 的 href

var myAttr = replace('#', clicked);

你应该做的最后一个是动画身体到元素有这个数据部分

var elementScrolledTo = $('*[data-section="' + myAttr + '"]');

$('html, body').animate({
                scrollTop: elementScrolledTo.offset().top
            }, 2000);

当然，这是jquery on event的handler函数。 http://api.jquery.com/on/

推荐阅读