How do I simulate smooth scroll using jquery?

Question

I'm trying to simulate scroll using jquery and I technically can, It just feels really rough and awkward.

JS:

$(document).ready(function(){
    $(this).bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta / 120 > 0) {
            movePage();
        }
    });
    var page1top = 0;
    function movePage() {
        page1top = page1top - 1;
        // page1 is the page that i want to move up when people scroll down.
        $('#page1').css('top': page1top + '%');
    }
});

HTML:

<div id='container'>
 <div id='page1'></div>
</div>

CSS:

#container {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: -100;
}

#page1 {
    width: 100%;
    height: 500%;
    z-index: 0;
}

I'm just wondering how I would make this smooth. No plugins please, thanks.

Lets see the whole code. What will work for sure is *{-webkit-transition:1s; transition:1s; -webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1); transition-timing-function: cubic-bezier(0.42,0,0.58,1);} Not optimal and there will be a delay, but smoothly.play around with the numbers — damiano celent
– damiano celent, Commented Jul 27, 2016 at 20:18

zsawaf · Accepted Answer · 2016-07-27 21:04:40Z

2

You're looking for jquery animate. Check fiddle for demonstration.

$('.to-target').click(function(){
  $('html, body').animate({
    scrollTop: $("#target").offset().top
  });
});

.box {
  width: 100vw;
  height: 100vh;
}

.long {
  background-color: aqua;  
}

.short {
  background-color: beige;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
  <div class="long box">
    <button class="to-target">Go to Target</button>
  </div>

  <div id="target" class="short box">

  </div>
</div>

answered Jul 27, 2016 at 21:04

zsawaf

2,01117 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marios Fakiolas · Accepted Answer · 2016-07-27 20:32:01Z

0

Replace .css() with .animate() and scroll to the selector you want smoothly:

$target = $('#someEl');
$('html, body').animate({
    scrollTop: $target.offset().top
}, 200);

answered Jul 27, 2016 at 20:32

Marios Fakiolas

1,5451 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

How do I simulate smooth scroll using jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related