Question

我目前正在创建一个单页网站。我希望它在这里禁用滚动和转换类似于这些：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;
}

JS

$( 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/

然而，令人惊讶的是 - 它并没有真正起作用。我试图排除禁用滚动的位，但即使我删除它，转换仍然不会顺利。

对任何建议都会感激不尽。

Answer 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

具有禁用滚动的div之间的平滑过渡

1 个答案: