Question

这是小提琴链接https://jsfiddle.net/hitech0101/5vhdm5hy/

$('.block').click( function () {
    $('#mainContainer').animate({'width':'20%'}, 1000);
  $(this).css({'background-color':'blue'});
  $('.block').css({'display':'block','width':'100%'});
  $('.second').css({'display':'inline-block'})
    });

在小提琴中，我使用jquery将水平块转换为垂直块。单击块时，我已将块颜色从红色更改为蓝色。当我点击一个特定的块时，我会将滚动条移动到垂直视图中块的位置。我尝试过jquery的scrollTop（）方法，但仍然无法按照我想要的方式运行它。请帮忙。

小提琴是我正在处理的网页的部分代表。我排除了原始页面上的更多内容。 maincontainer是页面上的第二个容器。

Answer 1

无需JavaScript。您可以在锚点href中指定一个元素，然后将其滚动到窗口顶部，包括它自己。

将div包裹在一个锚中或者只使用锚标记本身，它们都是包装器。

<a href="#scrollToMe">
  <div id="scrollToMe"></div>
</a>

请记住，它只能将元素最大限度地滚动到视图中，如果项目位于父元素的底部，则滚动将触及底部，它将无法继续前进。

Answer 2

$(this).get(0).scrollIntoView();

将此行添加到.click函数中。

Fiddle

Answer 3

我建议您获取偏移顶部值并将#maincontainer设置为该位置的动画

$('.block').click( function () {
    $('#mainContainer').animate({'width':'20%'}, 1000);
    $(this).css({'background-color':'blue'});
    $('.block').css({'display':'block','width':'100%'});
    $('.second').css({'display':'inline-block'});
    /*below is what i was talking about*/
    var pos = $(this).offset();
    $('#mainContainer').animate({ scrollTop: pos.top });

});

Answer 4

$(document).on("click", ".block", function() {
    var _body_html = $('html, body');
    var _scroll_to = $('.scroll-to');
    var _top = _scroll_to.offset().top;
    _body_html.animate({
        scrollTop: _top
    }, 1000);
    setTimeout(function() {
        _body_html.finish();
    }, 1000);
});

单击div时滚动到div

4 个答案: