Trigger event when user scroll to specific element - with jQuery

start executing jquery function when i scroll to a specific <div>
jquery scroll to element in div
window scroll jquery
javascript scroll event position
jquery detect scroll to bottom of page
scroll down jquery
angular scroll event
jquery scrolltop

I have an h1 that is far down a page..

<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>

and I want to trigger an alert when the user scrolls to the h1, or has it in it's browser's view.

$('#scroll-to').scroll(function() {
     alert('you have scrolled to the h1!');
});

how do I do this?

You can calculate the offset of the element and then compare that with the scroll value like:

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
       console.log('H1 on the view!');
   }
});

Check this Demo Fiddle


Updated Demo Fiddle no alert -- instead FadeIn() the element


Updated code to check if the element is inside the viewport or not. Thus this works whether you are scrolling up or down adding some rules to the if statement:

   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       //Do something
   }

Demo Fiddle

.scroll(), trigger( "scroll" ) in the third. The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects  I've improved the code so that it will trigger when the element is half way up the screen rather than at the very top. It will also trigger the code if the user hits the bottom of the screen and the function hasn't fired yet.

Combining this question with the best answer from jQuery trigger action when a user scrolls past a certain part of the page

var element_position = $('#scroll-to').offset().top;

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {
        //do stuff
    }
});

UPDATE

I've improved the code so that it will trigger when the element is half way up the screen rather than at the very top. It will also trigger the code if the user hits the bottom of the screen and the function hasn't fired yet.

var element_position = $('#scroll-to').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer

//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn't triggered the function yet
$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;

    var element_in_view = y_scroll_pos > activation_point;
    var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

    if(element_in_view || has_reached_bottom_of_page) {
        //Do something
    }
});

How to trigger animation after user scroll to N points, Basic idea: I want when user scroll to one point (in the middle of the pages - let to do is to detect when the user has scrolled past a certain point. that's easy: removes the scroll event handler, as I am assuming you only want this to fire once. <div id="box4"></div> <script> function getScrollTop(){ if(typeof pageYOffset!= Answers: Combining this question with the best answer from jQuery trigger action when a user scrolls past a certain part of the page. var element_position = $ ('#scroll-to').offset ().top; $ (window).on ('scroll', function () { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = element_position; if (y_scroll_pos > scroll_pos_test) { //do stuff } });

I think your best bet would be to leverage an existing library that does that very thing:

http://imakewebthings.com/jquery-waypoints/

You can add listeners to your elements that will fire off when your element hits the top of the viewport:

$('#scroll-to').waypoint(function() {
 alert('you have scrolled to the h1!');
});

For an amazing demo of it in use:

http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/

jQuery scroll() Method, jQuery Event Methods The scroll event occurs when the user scrolls in the specified element. The scroll Trigger the scroll event for the selected elements:. jQuery trigger action when a user scrolls past a certain part of the page. Trigger event when user scroll to specific element - with jQuery

Inview library triggered event and works well with jquery 1.8 and higher! https://github.com/protonet/jquery.inview

$('div').on('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
  } else {
    // element has gone out of viewport
  }
});

Read this https://remysharp.com/2009/01/26/element-in-view-event-plugin

onscroll Event, The onscroll event occurs when an element's scrollbar is being scrolled. on different scroll positions - When the user scrolls down 50 pixels from the top of the​  The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

Fire scroll only once after a successful scroll

The accepted answer worked for me (90%) but I had to tweak it a little to actually fire only once.

$(window).on('scroll',function() {
            var hT = $('#comment-box-section').offset().top,
                hH = $('#comment-box-section').outerHeight(),
                wH = $(window).height(),
                wS = $(this).scrollTop();

            if (wS > ((hT+hH-wH)-500)){
                console.log('comment box section arrived! eh');
                // After Stuff
                $(window).off('scroll');
                doStuff();
            }

        });

Note: By successful scroll I mean when user has scrolled to my element or in other words when my element is in view.

How to detect when user scrolls to the bottom of a div, jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements. Syntax: $(selector).on(event, childSelector​,  In addition, we also use the jQuery trigger method to trigger a scroll event as soon as the DOM is ready. We do this so that if any of the elements which should be animated are within the viewport

How to Detect if an Element is Scrolled Into View Using jQuery , I have an h1 that is far down a page.. <h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>. and I want to trigger an alert when the  You are indeed checking when the user is at least 400px away from the top of the window. So when you're scrolling below 400px you will trigger the function. That might not be what you are looking for. If you want to only trigger the function at 400px when scrolling up or down you can use this code:

Scrolling, is a quick guide on how to detect if an element is scrolled into view and implement a CSS animation that is triggered by a jQuery scroll event. As of jQuery 1.3, .trigger () ed events bubble up the DOM tree; an event handler can stop the bubbling by returning false from the handler or calling the .stopPropagation () method on the event object passed into the event. Although .trigger () simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

Detect the scrolling to bottom of the page using jQuery. · GitHub, The scroll event allows to react on a page or element scrolling. Show/hide additional controls or information depending on where in the document the user is preventDefault() in onscroll listener, because it triggers after the  jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the .trigger () method. jQuery's event handling system is a layer on top of native browser events. When an event handler is added using .on ( "click", function () {} ), it can be triggered using jQuery's .trigger ( "click" ) because

Comments
  • Debounce this please!
  • Is there any package library that does this as a function like jQuery Waypoint?
  • Thanks @DaniP. Cool snippet!
  • @ClosDesign you can use .off()to unbind the event jsfiddle.net/n4pdx/543
  • @DaniP I just did , thanks! And thanks for the answer, helped me a lot :)
  • I've already tried this. It only triggers once you've scrolled PAST the element. Any other solutions?
  • This solution works well to fetch recommendations and I have used it in production. Refer to the blog: liyao13.wordpress.com/2017/05/11/…
  • I'd suggest to use less cryptic variable names, even if accepted answer uses them.