What is the most effective way to achieve a seamless scrolling effect with jquery?

Question

What is the most effective way to achieve a seamless scrolling effect with jquery?

I'm attempting to create a smooth scroll effect using jQuery, and while I can technically achieve it, the movement feels clunky 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'd like to find a way to make this scroll effect smoother without relying on external plugins. Any advice would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

If you are in search of a way to animate using jQuery, consider exploring the jquery animate method. A demonstration can be found in the provided fiddle.

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

Answer 2

If you are in search of a way to animate using jQuery, consider exploring the jquery animate method. A demonstration can be found in the provided fiddle.

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

Answer 3

Answer №2

Swap out .css() for .animate() and smoothly scroll to the desired selector:

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

Answer 4

Swap out .css() for .animate() and smoothly scroll to the desired selector:

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

What is the most effective way to achieve a seamless scrolling effect with jquery?

Answer №1

Answer №2

Similar questions

Why does Grunt encounter an issue with cdnify, displaying a warning that says: "Caution: Parameters for path.join should be in string format"?

Clicking on a dynamically generated link will not result in the file being downloaded

What could be causing the incorrect styling of the <h1> tag and certain Bootstrap elements in my Vuejs project when I import Buefy?

Ways to align elements horizontally while preventing them from shifting positions

CSS is not being applied correctly in Safari 13 following a resize

Using Double Equal in a JavaScript For Loop

The Ajax dropdown is failing to display any results

Modifying the function name or element ID in a HTML template can cause it to cease functioning

Retrieve the smallest value from an array of objects using BitGO

Store a new JSON item in the localStorage

The elements within the array are being refreshed accurately, however, a separate component is being removed

Jquery results in an error and causes CSS elements to become stuck

Adjusting the widths of <input> and <select> elements

Creating a contact form using HTML and PHP

Monitoring every request in Express.js(logging)

Express Router Setup Error: The Router.use() method is expecting a middleware function, but instead received an undefined value

Determine the distance traveled by the mouse along a vector using Three.js

What is the best way to position a <label> to the left of an <input> field?

The Image Properties dialog in CKEditor appears to be empty

Utilizing a two-column design, position the third sibling element without relying on margins