jquery 滚动到 data-image-id

Question

我无法在包含各种图像的 div 容器上设置 id，但想要创建一个带有指向图库各个部分的跳转链接的导航。 我希望键入的图像上设置的一个元素是数据属性。 任何人都可以帮我提供一个可以让我设置标准跳转链接的功能吗

<a href="#abc123">A</a>

跳转到图像

<img src="asdf.jpg" data-image-id="abc123" />

我目前的尝试如下，但它返回： “无法在“Element”上执行“querySelector”：“{id-in-the-href}”不是 HTMLBodyElement 上的有效选择器。

$('#container a[href*="#"]').on('click', function(e) {
  e.preventDefault();
  var jumpTo = $(this).attr('href').replace('#', '');

  $('html, body').animate({
    scrollTop: $('img[data-image-id="'+jumpTo+'"]).offset().top,
  },
  500,'linear')}
)

Answer 1

你可以使用这个函数（应该为属性设置id），然后只需使用id参数

调用该函数

    var scrollToBottom = function (jumpTo ) {
        div_height = $("#" + jumpTo ).height();
        div_offset = $("#" + jumpTo ).offset().top;
        window_height = $(window).height();
        $('html,body').animate({
            scrollTop: div_offset-window_height+div_height
        },'slow');
    };

或者您可以使用

$('img[data-image-id="' + jumpTo + '"]')

代替

$("#"+jumpTo )

Answer 2

3713461833054212284varscrollToBottom=函数(jumpTo){div_height=$('img[data-image-id=''+jumpTo+'"]').height(); div_offset = $('img[data-image-id="' + JumpTo + '"]').offset().top; window_height = $(窗口).height(); $('html,body').animate({scrollTop: div_offset - window_height + div_height },'slow'); }; $('#container a[href*="#"]').on('click', function(e) { e.preventDefault(); var JumpTo = $(this).attr('href').replace ('#', ''); 滚动到底部 (jumpTo); – jmarx34 2019 年 5 月 17 日 12:24