Question

我有以下代码，我想要做的是当我点击按钮时，div的内容应该从div的初始显示。我不擅长js.For现在当我点击按钮然后div内容不显示直到我滚动页面。那么当我点击按钮时，怎么能让它自动滚动到div内容的顶部呢？

// HTML

<button type="button" class="btn btn-info btn-block" id="show"></button>

<div class="container-fluid" id="detail" style="display:none;"></div>

//的js

$(document).ready(function(){
    $("#show").click(function(){
        $("#detail").fadeIn();
    });
});

Answer 1

试试这个

$(document).ready(function() {
    $("#show").click(function() {
        $("#detail").fadeIn();
        $('html, body').animate({
            scrollTop: $("#detail").offset().top - 100
        }, 800);
    });
});

Answer 2

您可以在div元素上方添加元素。之后，在按钮单击事件中使用此功能。

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

这是一个例子。 https://plnkr.co/edit/kcs8UZaBcaegwTSSeThM?p=preview

Answer 3

您可以使用jQuery ScrollTo插件。

http://api.jquery.com/scrollTop/

$('#myButton').click(function() {
   //optionally remove the 500 (which is time in milliseconds) of the
   //scrolling animation to remove the animation and make it instant
   $.scrollTo($('#myDiv'), 500);
});

使用fadeIn滚动div

3 个答案: