禁用滚动的 div 之间的平滑过渡答案

【问题标题】：Smooth transition between divs with disabled scrolling禁用滚动的 div 之间的平滑过渡
【发布时间】：2014-01-18 13:45:58
【问题描述】：

我目前正在制作一个单页网站。我希望它在此处禁用类似于以下内容的滚动和转换：http://www.fk-agency.com/（例如，用户只能在单击链接后移动到网站的某些部分）。我确信它应该相当简单，所以我从显而易见的开始：

HTML：

<div id="bg1">ASDFG
    <a href="#bg2">kfhakfj</a></div>
<div id="bg2">QWERT</div>
<div id="bg3">ZXCVB</div>

CSS：

body{
    height:100%;
    overflow:hidden;
}

#bg1{
    width:100%;
    height:100%;
    background-color:pink;
}

#bg2{
    width:100%;
    height:100%;
    background-color:bisque;
}

#bg3{
    width:100%;
    height:100%;
    background-color:menu;
}

$( document ).ready(function() {
    scale();
    $(window).resize(scale);    


    $('a[href^="#"]').on('click', function(e){
        e.preventDefault();

        var target=this.hash,
            $target=$(target);

        $('html,body').stop().animate({'scrollTop':$target.offset().top
                                      },900,'swing',function(){
                                          window.location.hash=target;
                                      })
    })

});

$(window).on("mousewheel", function(e){
    e.preventDefault();
});

E：这是小提琴：http://jsfiddle.net/Yhpqn/4/

但是，令人惊讶的是 - 它并没有真正起作用。我试图对禁用滚动的位进行故障排除，但即使我删除它，过渡仍然不会顺利。

将不胜感激任何建议。

【问题讨论】：

你能在 it doesn't really work 上扩展吗，我在 chrome 中看起来不错
查看 webkit css 转换过渡以制作真正流畅的动画
当然可以。当您单击该链接时，它会将您带到另一个“跳转”部分。我希望它顺利滚动到这部分。 @Jervelund 我实际上尝试在其上添加一些过渡，但在我看来我是个白痴，因为即使我这样做了，另一个部分只是跳入而不是轻松滑动。
你忘了在 jsfiddle 中包含 jQuery...（你可以选择左上角的库）
@lukasgeiter 是的，感谢您的关注 :) 已编辑。

标签： jquery html css scroll smooth-scrolling

【解决方案1】：

这就是你要找的吗？我稍微重写了代码。此外，我不确定您是否从其他地方调用 scale()，但这并没有在您的小提琴中定义并且正在破坏您的脚本

$(document).ready(function() {


    $('a').click(function(e){
       e.preventDefault();

       var target= $(this).attr("href");
       $target=$(target);

       $('html,body').animate({scrollTop:$target.offset().top},900,'swing');
    });

 });

 $(window).on("mousewheel", function(e){
    e.preventDefault();
 });

JSFIDDLE

【讨论】：