1

I was just wondering if it's possible to trigger an alert when using window scroll function to a certain id instead of height in pixels. the reason why I'm asking is that I realized that the height would vary based on where it would be display so referencing to an id might be more efficient.

a_miguel6687
  • 521
  • 3
  • 10
  • 22

3 Answers3

3

With .position() .offset() you can get the position of an element. Combine that with your scroll function and you will have a "window scroll function to an id".

// store the position of the element in position
var position = $('#idOfElement').offset(); //=position() but always relative to 
                                           //document instead of parent. 
                                           //thanks to sidonaldson

// on scrolling of the document do something
$(document).scroll(function () {
    //the current height
    var y = $(this).scrollTop();

    //If the current Y is bigger than the element. (you scrolled beyond the element)
    if(y >= position.top){
        //do something
    }else{
        //do something else 
    }
});
stUrb
  • 6,612
  • 8
  • 43
  • 71
3

Using jQuery you can animate the page to an id.

$("html, body").animate({ scrollTop: $('#your-id').offset().top }, 1000, function(){
    alert("Scroll end");
});

Firstly you have to use 'html,body' to make it cross browser.

Then you work out where the id element is by working out it's offset relative to the page top (as opposed to position which is relative to the parent)

Then you set your speed in ms.

Finally you pass in a function reference or, in this case, define a callback function - it's here you can add your alert.

Please note this has to be after document.ready is fired.

sidonaldson
  • 24,431
  • 10
  • 56
  • 61
  • As far as I know, you dont need to use `html,body`. With just `body`, it works for all browsers I've tested it. (IE9, Chrome, Opera 12, Firefox...) In which ones doesn't? – Alvaro Sep 19 '13 at 09:20
  • http://stackoverflow.com/questions/12222485/why-to-use-html-body-for-scrolltop-instead-of-just-html This questions tells you why :) – sidonaldson Sep 19 '13 at 09:25
  • Not really. He doesn't specify the browsers or gives any link to any data proving it. He might be referring to very old browsers... – Alvaro Sep 19 '13 at 09:32
  • Alvaro - it's the accepted way to scroll the page cross browser. There were issues with Safari in a previous version and differences in the way browsers handle 'setting' and 'getting' scrollTop. http://stackoverflow.com/questions/5371139/window-scrolltop-vs-document-scrolltop I can't specify exactly why because this has been the accepted way of doing it for a long time. For the sake of <5 extra letters you get a more robust solution. – sidonaldson Sep 19 '13 at 09:51
  • Yeah, is simple to solve, I was just a bit curious about it as I didn't notice any problem in any browser so far. Thanks anyway! – Alvaro Sep 19 '13 at 10:37
2

Try this:

//getting the Y position of the element you want to scroll to
var position = $('#element').offset().top;

//scrolling to the element with an animation of 700 miliseconds
$('body').animate({
    scrollTop: position
}, 700, function(){  //callback function (executed when animation finishes)
    alert("Hello there!");
});

Living demo: http://jsfiddle.net/wdFCm/2/

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • He does not want to scroll to a certain `el.top`; but wants to trigger something when he reaches the `el.top`. At least that is what I make of his question. – stUrb Sep 19 '13 at 09:14