How to not move page if html element is on screen?

Question

I don't use jQuery. Can this be solved without it ?

I have only 1 HTML / JavaScript / (CSS) page. It contains links that reference html elements on the very same page. The page has a automatic vertical scrollbar because it is long. I need my event handler for link clicks to check if the referenced element is on the screen at the moment of the click. If it is there the page should not change position. Is that possible and how ?

check if on screen
don't move page

This code is a simple example that the page jumps so that the "hello world 2" is on the very top of the browser window.

<html>
    <head>
        <script type='text/javascript' language='javascript'>
            function onLinkClick(id)
            { }
        </script>
    </head>
    <body>
        <div id="id1">hello world 1</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><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><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="id2">hello world 2</div>
        <a href="#id2" onclick="onLinkClick('id2')">link</a>
        <div id="id3">hello world 3</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><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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>

Please look into a possibly duplicate question here: http://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen — Madhavan Malolan, Oct 29 '13 at 13:02
Also a possible duplicate of [Check if element is visible after scrolling](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) — Christofer Eliasson, Oct 29 '13 at 13:04
@ChristoferEliasson Checking for visibility is one part of my question. — Bitterblue, Oct 29 '13 at 13:10
@mini-me If your callback function return `false`, then the event will be stopped, and the browser will not scroll the page. In you callback function, check if the element is already visible - if it is return `false`, otherwise return `true`. — Christofer Eliasson, Oct 29 '13 at 13:32
@mini-me It is NOT wrong, returning `false` from a callback will indeed prevent the default behavior - [here](http://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-an-onclick-event) is some more on that. It is however true that you can call `preventDefault()` on the event, to achieve it as well - doing so is actually a more modern way of achieving it. Talking modern ways of doing things, it might be worth mentioning that there are more modern ways of [attaching event-listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener) as well — Christofer Eliasson, Oct 29 '13 at 21:36
@ChristoferEliasson I'm not an expert on JavaScript so if you try to help a newbie you should not leave out important details. I've never seen the quotes (onClick='') as a function and the detail that it is one is worth something and should not be left out (except you like to play games in comments). — Bitterblue, Oct 30 '13 at 09:29

score 0 · Answer 1 · answered Oct 29 '13 at 13:03

0

did you tried

getElementByTagName() ???

answered Oct 29 '13 at 13:03

sam

2,426
2
20
29

score 0 · Accepted Answer · answered Oct 29 '13 at 14:33

Ok, I solved it by myself (yes with some help of the referenced duplicate question). Using no jQuery:

function isElementVisible(element)
{
    var posTop = 0;
    var temp = element;
    while (temp)
    {
        posTop += temp.offsetTop;
        temp = temp.offsetParent;
    }
    var posBottom = posTop + element.offsetHeight;
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + window.innerHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

function onLinkClick(id)
{
    var x = document.getElementById(id);
    if (isElementVisible(x))
        // prevent page to be scrolled up or down
        event.preventDefault();
}

How to not move page if html element is on screen?

2 Answers2