0

我有一个页面，其高度为总可视区域的 200%，这意味着大约有两个页面相互重叠。我必须滚动到底部才能查看另一半页。我将完整<body>分成两个 div，每个 div 的高度为100%。

在 div1 中，我给 div2 提供了这样的链接，该链接有效，

<div id="div1" class="mystyle1">
<a href="#div2">Click Me To Go To DIV2</div>


<div id="div2" class="mystyle2">
<a href="#div1">Click Me To Go To DIV1</div>

这可行，但它会立即滚动，我需要它平滑，以便用户可以看到过渡。我也尝试在 CSS 中设置它：

-webkit-transistion: all 1s ease-in-out;

没运气！

4

2 回答 2

0

您可以使用 Jquery 方便地实现这一点。谷歌搜索关键字如动画滚动到顶部和动画滚动到 ID会给你一个想法。

做一个快速的小提琴，也许这就是你想要发生的事情：http: //jsfiddle.net/g5D33/

--

顺便说一句，您的代码中有一些小错别字，例如<a>缺少结束标记的标记和拼写为s 的转换。;)

于 2013-01-11T05:52:32.913 回答
0

为此，我总是使用一个小的 JQuery 函数

$('a[href^="#"]').click( function(){
        var scroll_el = $(this).attr('href');
        if ($(scroll_el).length != 0) { 
                    $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 700); 
        }
        return false;
});

JSFIDDLE

对于水平滚动：

$('a[href^="#"]').click( function(){
            var scroll_el = $(this).attr('href');
            if ($(scroll_el).length != 0) { 
                        $('html, body').animate({ scrollLeft: $(scroll_el).offset().left }, 700); 
            }
            return false;
    });

JSFIDDLE

于 2015-08-04T12:10:47.050 回答