CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Cristian
Cristian

Reputation: 495

How do I simulate smooth scroll using jquery?

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.

Upvotes: 1

Views: 1976

Answers (2)

zsawaf
zsawaf

Reputation: 2001

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>

Upvotes: 2

Marios Fakiolas
Marios Fakiolas

Reputation: 1545

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

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

Upvotes: 0

Related Questions