Question

嗨我有一个页面，其总高度为可见区域的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;

没有运气！请帮忙。

Answer 1

使用Jquery可以方便地实现此目的。谷歌搜索关键字animated scroll to top和animate scroll to ID会给你一个想法。

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

-

顺便说一句，你的代码上有一些小的拼写错误，例如<a>标记缺少一个结束标记，而过渡拼写为 s 。 ;）

Answer 2

为此，我总是使用一个小的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

在#div上慢慢滚动页面

2 个答案: