Vertical scroll by parts

Question

Vertical scroll by parts

Navigation

#1 by (2 votes)

1

I would like to know how to program with html, css and js .a custom scroll Go from the cover to the next page with a single movement of mouse roulette. This is what I want link

And repeat with all the sections, to make the website more usable.

Can you help me? This is the image where I charge the js and css, the js I charge it from modo.js

(function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    
    if(i >= 0 && i < a.length) {
      $('html,body').animate({
        scrollTop: a[i].offsetTop
      });
    }
  });
})();
console.clear();

a{
display:block;
}

    
     <a name="#A1"></a>
     Hola
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque arcu odio, mollis sit amet volutpat nec, pharetra hendrerit justo. Fusce vel sodales sem. Vivamus tincidunt nibh vitae augue convallis sodales quis in odio. In ullamcorper dapibus varius. Suspendisse placerat dictum sapien, a ultrices justo pretium ut. Pellentesque lectus leo, condimentum eget tristique at, vestibulum a ligula. Maecenas dignissim lacus magna. Sed elementum tempor justo. Vestibulum porta condimentum justo, ut volutpat turpis molestie nec. Donec nec dictum neque. Morbi sapien quam, porttitor nec magna a, viverra venenatis est. Donec a urna sit amet tellus volutpat accumsan eu in purus. Fusce tristique dui vitae ligula molestie, sit amet sodales erat dignissim. Maecenas efficitur sagittis hendrerit. Maecenas in orci diam.</p>
     <hr>
    <a name="#A2"></a>
    adios
    
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque arcu odio, mollis sit amet volutpat nec, pharetra hendrerit justo. Fusce vel sodales sem. Vivamus tincidunt nibh vitae augue convallis sodales quis in odio. In ullamcorper dapibus varius. Suspendisse placerat dictum sapien, a ultrices justo pretium ut. Pellentesque lectus leo, condimentum eget tristique at, vestibulum a ligula. Maecenas dignissim lacus magna. Sed elementum tempor justo. Vestibulum porta condimentum justo, ut volutpat turpis molestie nec. Donec nec dictum neque. Morbi sapien quam, porttitor nec magna a, viverra venenatis est. Donec a urna sit amet tellus volutpat accumsan eu in purus. Fusce tristique dui vitae ligula molestie, sit amet sodales erat dignissim. Maecenas efficitur sagittis hendrerit. Maecenas in orci diam.</p>
    <hr>

javascript html css

asked by Antonio Ángel Estrada Pérez 17.03.2018 в 13:50

source

1 answer

Excel formulas and rules Search within an Array to print match value

score 2 · Answer 1

For the layout of the scroll you can see in this plugin:

link

Basic example:

link

Once you have your scroll you can play with the function scroll of jQuery or directly with pure javascript. In these two links they speak of:

1.- Scrolling a given anchor (in this case with a click event)

link

2.- Know if the scroll is up or down

link

I leave you a modified fiddle that mixes both links. The example makes a scroll to both anchors of the page as you scroll up or down. In your case you will have to look for the offset and depending on where you are going to an anchor or another.

link