0

Is there any way to not letting a function execute when the page is at the top or on a certain anchor?

This is the function I have, which runs as soon as the Mouse-wheel scrolls:

$(document).on('mousewheel DOMMouseScroll', function(MyFunction) {
// some stuff is happening
});

I want to add these two conditions:

  1. when the page is at the top I want MyFunction to work only when I scroll down.
  2. If the page is at a certain anchor for example <a id="MyAnchor"> MyFunction works only when I scroll up.

Is it even possible? Please let me know if I am not clear and if you need more explanation, thank you.

Bondsmith
  • 1,343
  • 3
  • 13
  • 27
  • well your first condition should already work as you can only scroll down when at the top of the page anyway. Your second condition is possible, might be worth looking at twitter scrollspy plugin to detect when a certain anchor is in view. – Novocaine Sep 17 '14 at 07:59
  • But MyFunction does execute at the top. – Bondsmith Sep 17 '14 at 08:03
  • What, without you scrolling? Then you must have additional code to be triggering that. as your code above would not trigger the function unless a scroll event was triggered. – Novocaine Sep 17 '14 at 08:06
  • Exactly, I am traveling trough anchors using this function, and animate the viewport, but the problem is that the function still runs when the page is at the top. So i want scrolling up stops working when the page is at the top. – Bondsmith Sep 17 '14 at 08:11
  • 1
    then as @sabithpocker suggested you should add the check to see if the page is at the top within your code. Heres a link to [twitter bootstrap scrollspy](http://getbootstrap.com/javascript/#scrollspy) which should help with your second condition. – Novocaine Sep 17 '14 at 08:15

2 Answers2

0

You can use scrollTop to see if its scrolled to top of page

if($('body').scrollTop() === 0)

Page is at a certain anchor? its not clear, do you mean mouse pointer is there or if the item is visible in viewport?

In that case, you can check

if(window.location.hash === "hash-of-your-div")

$(document).on('mousewheel DOMMouseScroll', function(MyFunction) {
    if(window.location.hash === "hash-of-your-div" || $('body').scrollTop() === 0){
        return false;
    }
    //normal code
});

But it wont work if element is scrolled without clicking hashed anchor tag. For such a case you will have to get position of the element and current scrollTop of body, and see if the item is in viewport. Or use some plugin for it there are many I guess.

How to tell if a DOM element is visible in the current viewport?

Community
  • 1
  • 1
sabithpocker
  • 15,274
  • 1
  • 42
  • 75
  • No not the pointer, but lets say I clicked on a button and it scrolled the page to a certain anchor, then I want the second condition happens when page is stopped at that anchor. – Bondsmith Sep 17 '14 at 08:03
  • But the page does not get the hash, because actually i am not using button to start the scrolling, I use this function to start animating the viewport (autoscroll) up and down between anchors. – Bondsmith Sep 17 '14 at 08:13
  • Please explain your exact requirement so that we don't have to waste time guessing :) – sabithpocker Sep 17 '14 at 08:17
  • Believe me, I am trying to, I have the exact function I wrote, and it needs to be stopped at the top and not working (when scrolling up with mouse-wheel). I cannot access the html this function will be placed at, and the hash does not show up since the function is animating the viewport instead of a button or such.I truly want to have it fixed, because I have been working on it for half a day with no luck. – Bondsmith Sep 17 '14 at 08:20
  • I cannot access the html this function will be placed at? why? how are you placing it? with `iframes`? That will be a crucial info. – sabithpocker Sep 17 '14 at 08:24
  • Or if you are looking for scrollSpy as @Novocaine suggested? – sabithpocker Sep 17 '14 at 08:26
  • I am making a widget that will be used by users in their html pages, I can provide the users the option to enter the name of an anchor in the widget option, and in the XML that I am writing I get that anchor name. Now I need to make this function stops scrolling-down when the page is stopped on this anchor. – Bondsmith Sep 17 '14 at 08:29
  • I am looking into it as we chat here. Trying to find out how to use it... I hope it helps. Thanks anyway. – Bondsmith Sep 17 '14 at 08:31
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61393/discussion-between-sabithpocker-and-ogdila). – sabithpocker Sep 17 '14 at 08:31
0

Try to use some flag variables to tell your program what situtaion the page is.
When page loaded,you could set a veriable like first=true.Then set it false when you scroll down and turn it to true when page scrolls to top. Same to 2.

KyleCTX
  • 41
  • 9
  • I am writing a widget and I have to work with anchors, I do not have control on the page where the widget will be placed. But i can include an option in the xml to receive that anchor and place it in the code, that is why i have to go through this process. – Bondsmith Sep 17 '14 at 08:08