Question

我有如下的Html代码，

<div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div>

我写jquery滚动到gameNo 456，如下所示。

var container = $("html,body");
var scrollTo = $(this).find('.saveIcon').attr('data-unique', 456);

 container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

我使用的是jQuery 1.9版。我在控制台中收到错误：

无法读取未定义的属性“top”

是不是可以滚动到类名而不是id？

但它在Firefox中运行良好。但不是在Chrome或IE中。

我尝试从stackoverflow中找到解决方案。但所有其他解决方案都不同于我的情况。

Answer 1

您没有定位DOM对象，而是以字符串为目标。

scrollTo = $(this).find('.saveIcon').attr('data-unique', 456); -> this is wrong

因此，当您尝试定位元素时，实际上是在设置数据唯一的＆＃39;到了＆＃39; .saveIcon＆＃39;元件。

试试这个：

scrollTo = $('.saveIcon');

工作代码：

var $container = $("html,body");
var $scrollTo = $('.saveIcon');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

Answer 2

你看过滚动查看功能吗？

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

element.scrollIntoView(true);

Answer 3

我正在使用以下普通js，请尝试在您的代码中使用它：

$('a.smooth-scroll[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

Answer 4

这两个代码对我来说就像是一个魅力，第一个将滚动到页面顶部，但是如果您想滚动到某个特定的div，请使用第二个带有您的div ID的代码。

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

如果要按类名滚动到，请使用以下代码

enter code here
var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + 
$container.scrollTop(), scrollLeft: 0},300);

jquery滚动到班级名称

4 个答案: