CODEWITHSUNDEEP
jqueryhtmlcssscrollsmooth-scrolling
Entalpia
Entalpia

Reputation: 787

Smooth transition between divs with disabled scrolling

I'm currently making a one-page site. I wanted it to have disabled scrolling and transitions similar to these in here: http://www.fk-agency.com/ (as in, user can only move to certain part of the website after clicking a link). I was convinced it should be rather simple, so I started with the obvious:

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: Here's the fiddle: http://jsfiddle.net/Yhpqn/4/

But then, surprise - it doesn't really work. I was trying to fault the bit that disables the scrolling, but even when I delete it, the transition still won't be smooth.

Will be grateful for any advice.

Upvotes: 0

Views: 2301

Answers (1)

jmore009
jmore009

Reputation: 12923

Is this what you are looking for? I re-wrote the code just a bit. Also I'm not sure if you were calling scale() from somewhere else but that was not defined in your fiddle and was breaking your script

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

Upvotes: 1

Related Questions