0

ボタンがクリックされたときにページをスクロールしたい。以下のコードは、sweetalert.js と sweetalert.css がなくても問題なく動作します。最初にページが一番上にスクロールしますが、アラート ボックスから [OK] ボタンをクリックすると、ページが自動的に下にスクロールします。こちらのリンクから、sweetalert.js と sweetalert.css をダウンロードしてください。

<html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script>
        <script src="js/sweetalert.min.js"></script>
    <link rel="stylesheet"  type="text/css" href="css/sweetalert.css"/>
    <script>
$(document).ready(function (){
    $("#click").click(function (){

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

        swal({
            title: "This is title",
            text: "Some error occurred",
            type: "error",
            confirmButtonText: "Ok"
        });
        window.scrollTo(0, 100);
            });
});
    </script>
    <div id="div1" style="height: 900px; width 100px">
    Div1 is here.
    </div>
    <br/>
    <div id="div2" style="height: 900px; width 100px">
    Div2 is here.
</div>
    <button id="click">Click here</button>
</html>
4

1 に答える 1

1

あなたの出力がどのように必要なのかわかりません。ただし、スクロールを確認コールバックに配置すると、ユーザーがSweetalert確認アラートをクリックするとページがスクロールされます。以下は編集したコードです。

$(document).ready(function (){
    $("#click").click(function (){
        swal({
            title: "This is title",
            text: "Some error occurred",
            type: "error",
            confirmButtonText: "Ok"
        }, function(){
            $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            window.scrollTo(0, 100);
        });
    });
});

また

クリック後にそれを一番上に保つための別のハック

$(document).ready(function (){
    $("#click").click(function (){
        $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);

        swal({
            title: "This is title",
            text: "Some error occurred",
            type: "error",
            confirmButtonText: "Ok"
        }, function(){
            $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 100);
        });
    });
});
于 2015-12-16T05:22:08.320 に答える