How to implement a "scroll Hijacking"

Question

I have noticed in several modern pages a scroll behavior that goes up to certain interest part of the content, researching, I found that this type of behavior is called "Hijacking". The term "Hijacking" literally translated means "kidnapping". Perhaps it has some connection with the fact that in these pages the scroll definitely disappears and presents this new behavior. I also saw that there are problems of compatibility with this "effect".

Trying to reproduce this behavior, I imagined working with the scrollTop, when the position of scroll stood on a section would use the .animate passing the position of scrollTop, but I was unsuccessful.

Finally, I would like to know how to implement something similar, or if someone already has something ready and wants to share, I thank you.

Here is an example of the Hijacking scroll: codyhouse - Hijacking, just enable the Hijacking option.

Answer 1

First, let’s understand better what it means Hijacking Scroll.

The literal translation of the term (by Google Translate) is "roll hijacking", which perfectly defines what is.

Scroll hijacking is when you control the user’s scroll bar, i.e., the user has no control of the action that will be performed when scrolling the scroll, and you set that in your code.

This is a "drastic" attitude and there are some questions whether your use really is good or that can cause problems, especially for mobile devices.

Now that we know what it is, let’s go to the examples:

You can do this only with javascript (jQuery) and "hijacking" the use of wheel mouse.

See the example below taken from this question.

// I need to make this dynamic
var currentSection = $('#section1');
$(window).on('wheel', function(e) {
  var delta = e.originalEvent.deltaY;
  if (delta > 0 && currentSection.next().length > 0) {
    currentSection = currentSection.next();
    scrollTo(currentSection);
  } else if (delta < 0 && currentSection.prev().length > 0) {
    currentSection = currentSection.prev();
    scrollTo(currentSection);
  }

  function scrollTo(el) {
    realoffSet = el.offset().top;
    $("html, body").animate({
      scrollTop: realoffSet
    }, 500);
  }
});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.full {
  height: 100%;
  width: 100%;
}

#section1 {
  background-color: blue;
}

#section2 {
  background-color: red;
}

#section3 {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1" class="full"></div>
<div id="section2" class="full"></div>
<div id="section3" class="full"></div>

This is a simple example of its use. In the example you mentioned, it still has anchors for sections, but that’s one more feature.

The example you posted is using the Velocity.js, as shown very well in reply o @Leon.

Another example of plugin to do this is the fullPage.js, that does what you want besides other effects.

See the example of its use below:

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    menu: '#menu',
    scrollingSpeed: 1000
  });
});

h1 {
  font-size: 6em;
}

p {
  font-size: 2em;
}

.intro p {
  width: 50%;
  margin: 0 auto;
  font-size: 1.5em;
}

.section {
  text-align: center;
}

#menu li {
  display: inline-block;
  margin: 10px;
  color: #000;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#menu li.active {
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

#menu li a {
  text-decoration: none;
  color: #000;
}

#menu li.active a:hover {
  color: #000;
}

#menu li:hover {
  background: rgba(255, 255, 255, 0.8);
}

#menu li a,
#menu li.active a {
  padding: 9px 18px;
  display: block;
}

#menu li.active a {
  color: #fff;
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  z-index: 70;
  width: 100%;
  padding: 0;
  margin: 0;
}

#demosMenu {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

<ul id="menu">
  <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
  <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
  <li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>


<div id="fullpage">
  <div class="section " id="section0">
    <h1>fullPage.js</h1>
    <input type="hidden" name="id" value="1" />
    <p>Create Beautiful Fullscreen Scrolling Websites</p>
  </div>
  <div class="section active" id="section1">
    <div class="slide">
      <div class="intro">
        <h1>Create Sliders</h1>
        <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
      </div>

    </div>
    <div class="slide">
      <div class="intro">
        <img src="imgs/1.png" alt="simple" />
        <h1>Simple</h1>
        <p>Easy to use. Configurable and customizable.</p>
      </div>
    </div>
    <div class="slide">
      <div class="intro">
        <h1>Cool</h1>
        <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
      </div>
    </div>
    <div class="slide">
      <div class="intro">
        <img src="imgs/3.png" alt="Compatible" />
        <h1>Compatible</h1>
        <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
      </div>
    </div>
  </div>
  <div class="section" id="section2">
    <div class="intro">
      <h1>Example</h1>
      <p>HTML markup example to define 4 sections.</p>
    </div>
  </div>
  <div class="section" id="section3">
    <div class="intro">
      <h1>Working On Tablets</h1>
      <p>
        Designed to fit to different screen sizes as well as tablet and mobile devices.
        <br /><br /><br /><br /><br /><br />
      </p>
    </div>
  </div>
</div>

In case you want to know more about it, I thought this article very interesting and also has some arguments about its use.

Answer 2

I created a fiddle with the use of this Scroll Hijacking by Velocity used in your example and you can check out how it works there. In this case it is all based on Velocity.js, which is a plugin that will make all the animation for you using just a few simple commands.

You can check that on <body> there is the option to turn the scroll Hijacking on/off.

Follow the link: Velocity - Scroll Hijacking

Important detail: It does not work Mobile

Answer 3

I created a simple and practical example:

jQuery(document).ready(function() {
  jQuery('li').click(function(){
  		switch(jQuery(this).text().trim()){
      	case 'Vermelho':
        $('html, body').animate({
            scrollTop: 0
        }, 500);
        break;
        case 'Verde':
        $('html, body').animate({
            scrollTop: 500
        }, 500);
        break;
        case 'Azul':
        $('html, body').animate({
            scrollTop: 1000
        }, 500);
        break;
      }
  })
});

ul {
  position: fixed;
  float: left;
  height: 50px;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
}

ul li {
  float: left;
  width: 150px;
  cursor: pointer;
  color: #000;
  border: 1px solid #000;
  background: #CCC;
}

ul li:hover {
  background: #CCC:
}

div {
  width: 100%;
  height: 500px;
  float: left;
}

.a {
  background: red;
}

.b {
  background: green;
}

.c {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>Vermelho</li>
  <li>Verde</li>
  <li>Azul</li>
</ul>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>