Automatically scroll to each div or element on the page

Question

Automatically scroll to each div or element on the page

Can anyone help me with implementing an auto scroll to each div or element when the user scrolls using the mouse? Here is the scenario:

Imagine this structure of the page...

<div id="main-wrap">

<div class="my-div-1">
    <p>here goes my content 1</p>
    <img src="/images/sample-1" alt="sample-1"/>

</div>

<div class="my-div-2">

<p>here goes my content 2</p>
<img src="/images/sample-2" alt="sample-2"/>

</div>

<div class="my-div-3">

<p>here goes my content 3</p>
<img src="/images/sample-3" alt="sample-3"/>

</div>

</div><!-- end of main-wrap id -->

-If each div has enough content to make the page long, and a user is viewing my-div-1, how can I automatically scroll to my-div-2 when they scroll down instead of through the whole div?

I hope that makes sense. Any advice on implementing this feature using JavaScript and JQuery would be greatly appreciated.

Thank you in advance for any assistance.

javascript jquery css html

Answer 1

Answer №1

Check out this fiddle for what you need: http://jsfiddle.net/3qxhY/9/

You can find the plugin used in the code here (debounce/throttle plugin):

Code

// debounce/throttle plugin
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

// insert elements to be scrolled to here
divs = [$(".my-div-1"),$(".my-div-2"),$(".my-div-3")];

var lastScrollTop = 0; // update on each scroll to determine direction
var run = true;

$(window).scroll($.debounce(250, true, function () { // only runs once per scroll
  var st = $(window).scrollTop();
  if (st > lastScrollTop) { 
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i + 1);
    });      
    run = (next != divs.length) ? true : false;
  } else {
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i);
    }); 
    run = true;
  }
  if (run) {
    $('html, body').animate({
      scrollTop: divs[next].offset().top
    }, 1000,'linear', function() {
      lastScrollTop = $(window).scrollTop();
    });
  } else { lastScrollTop = $(window).scrollTop(); }
}));

Answer 2

Check out this fiddle for what you need: http://jsfiddle.net/3qxhY/9/

You can find the plugin used in the code here (debounce/throttle plugin):

Code

// debounce/throttle plugin
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

// insert elements to be scrolled to here
divs = [$(".my-div-1"),$(".my-div-2"),$(".my-div-3")];

var lastScrollTop = 0; // update on each scroll to determine direction
var run = true;

$(window).scroll($.debounce(250, true, function () { // only runs once per scroll
  var st = $(window).scrollTop();
  if (st > lastScrollTop) { 
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i + 1);
    });      
    run = (next != divs.length) ? true : false;
  } else {
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i);
    }); 
    run = true;
  }
  if (run) {
    $('html, body').animate({
      scrollTop: divs[next].offset().top
    }, 1000,'linear', function() {
      lastScrollTop = $(window).scrollTop();
    });
  } else { lastScrollTop = $(window).scrollTop(); }
}));

Automatically scroll to each div or element on the page

Answer №1

Similar questions

When a panorama is entered in ThreeJS/Panolens, what is the orientation of the camera?

Interacting with my Rails API through JavaScript requests

Is your Ajax jQuery live search not functioning properly with JSON data?

Difficulty arises in designing a tableless layout due to the issue of auto

Incorporating data types into a constant in Typescript/Javascript

Implementing a line break within a JavaScript function specifically designed for formatting images

Submitting form rows via Checkbox selection in PHP

Ways to resolve issues with resizing div elements while waiting for JavaScript to load

The error message "404 Not found" is returned when attempting to retrieve a Google spreadsheet

Is there a way to specifically execute a Mongoose validate function solely for the create user page and not the edit user page?

Modifying the status of a link using jQuery

Express application (utilizing TypeScript) failing to handle routes efficiently

How can MongoDB be used to query nested JSON structures?

Anticipate feedback from Python script in Node.js

Can you help me troubleshoot my PHP upload script?

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Issue encountered while retrieving values from JSON for the data table

What is the best way to modify the text color within a Navbar, especially when the Navbar is displayed within a separate component?

What technologies are utilized to create this price chart in the JavaScript visualization?

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript