How to detect when the user has scrolled to a certain area on the page using jQuery? [duplicate]

Question

Possible Duplicate:
How to detect page scroll to a certain point in jQuery?
Check if element is visible after scrolling

How can I detect when the user has reached this div:

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />  <div id="theTarget">I have been reached</div> 

EDIT

Got the answer from this question:

Check if element is visible after scrolling

So I just did this:

function isScrolledIntoView(elem) {     var docViewTop = $(window).scrollTop();     var docViewBottom = docViewTop + $(window).height();     var elemTop = $(elem).offset().top;     var elemBottom = elemTop + $(elem).height();     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop)); }  $(window).scroll(function() {         if(isScrolledIntoView($('#theTarget')))     {         alert('visible');     }     }); 

Answer 1

Compare the page scroll position to your element top position, than call your function.

jQuery

$(document).on('scroll', function() {   if ($(this).scrollTop() >= $('#theTarget').position().top) {     console.log('I have been reached');   } })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="theTarget">I have been reached</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

ES6 (Pure JS, no jQuery)

var target = document.querySelector('#theTarget');  document.addEventListener('scroll', () => {   if (window.scrollY >= target.getBoundingClientRect().top) {     console.log('I have been reached');   } })

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="theTarget">I have been reached</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 2

I think you can accomplish your goal by comparing values from your div position

var divPosition = $("#theTarget").offset().top; 

and the window scroll position

var scrollPosition = window.scrollY;