Javascript 如何在使用jQuery UI幻灯片效果时不丢失HTML DIV垂直滚动位置？_Javascript_Jquery_Html_Jquery Ui

Javascript 如何在使用jQuery UI幻灯片效果时不丢失HTML DIV垂直滚动位置？

javascript jquery html jquery-ui

Javascript 如何在使用jQuery UI幻灯片效果时不丢失HTML DIV垂直滚动位置？,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我有一些JavaScript可以滑动一个htmldiv标记，还有一个可以使用jqueryui滑动效果。当我使用滚动条在div标记上调用滑动效果时，滚动条会滑动到最顶端。有没有办法防止这种情况这种行为的一个例子是： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Sliding Test</title> &

我有一些JavaScript可以滑动一个htmldiv标记，还有一个可以使用jqueryui滑动效果。当我使用滚动条在div标记上调用滑动效果时，滚动条会滑动到最顶端。有没有办法防止这种情况

这种行为的一个例子是：

<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">
    <title>Sliding Test</title>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

    <script type="text/javascript">

        $('document').ready(function() {

            var div1 = $('#div1');
            var div2 = $('#div2');

            $('#forward').on('click', function() {
                div1.hide('slide', { direction: 'left', duration: 2000 });
                div2.show('slide', { direction: 'right', duration: 2000 });
            });

            $('#backward').on('click', function() {
                div2.hide('slide', { direction: 'right' });
                div1.show('slide', { direction: 'left' });
            });
        });

    </script>

</head>
<body>

<input id="forward" type="button" value="Forward">
<input id="backward" type="button" value="Backward">

<div id="div1" style="position: absolute; top: 40px; left: 20px; width: 200px; height: 150px; margin: 10px; overflow: auto; overflow-x: hidden; border: 1px solid #000000">

    Div 1
    <br>
    <br>

    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10

</div>

<div id="div2" style="display: none; position: absolute; top: 40px; left: 20px; width: 200px; height: 150px; margin: 10px; overflow: auto; overflow-x: hidden; border: 1px solid #000000">

    Div 2
    <br>
    <br>

    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10

</div>

</body>
</html>

问候