How do I make an element appear in the center of a screen from a link?

Question

I'm not entirely sure how to phrase this, so bear with me.

I've got a map on a page with many symbols on it. Each symbol is enclosed within a <div> tag with CSS to support the placement of this symbol on the location on the map.

I've got a simple search page that links to all these symbols based on the id of the <div> tags.

<div class="poi" id="poi1">
    <img src="poi1.jpg" />
</div>

I know that to go to that element I just need the link to be something like http://localhost/map#poi1

Thus far, I know that when clicking or manually entering this type of urls, the element usually appears in the top right or something.

What I would like to know is if there is a way that I am able to make that element appear in the center of the screen, upon clicking the hyperlink or entering the url manually?

I am not trying to make the symbol appear in the center of the screen as though it is floating. What I am trying to do is to make it as though the user has scrolled to that portion of the map to view the symbol so that it is near the center of the screen.

I've forgotten to mention that the id's are in terms of hundreds per page and are dynamically generated.

Answer 1

This can be done with javascript. Here's an example. I've added comments in the JS snippet.

 // Add a method to get the position of the element from the top of the page. Element.prototype.documentOffsetTop = function () { return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 ); }; var element = document.getElementById('para'); // Add an event listener for click on the libk document.querySelector('.link').addEventListener('click', function(e) { // variable top = (position of element from top) - (half the height of window). This bit makes it so that the element appears in the center. var top = document.getElementById('para').documentOffsetTop() - (window.innerHeight / 2); // Remember that the above code makes it so that the top of the element is in center of the document. If you want the center of the element to be in the center, do this: // var top = element.documentOffsetTop() - (window.innerHeight / 2) + (element.clientHeight / 2); // prevent the default action of the libk e.preventDefault(); // Simply scroll to the position on click. window.scrollTo(0, top); }) 

 * { margin: 0; padding: 0; } .some, .some2 { height: 500px; border: 1px solid black; width: 500px; margin-bottom: 100px; } 

 <div class="some">some text <a href="#para" class="link">Go to para</a> </div> <div class="some2"> <p id="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet mollitia totam molestiae, enim corrupti facere aliquam odio cumque laborum ipsa, dolores voluptates quaerat, soluta provident itaque doloremque consequatur ratione? Fugit.</p> </div> 

EDIT: Here's how to perform the same task for different pages. I tried for a pure JS solution but for some reason window.scrollTo won't fire on page load. So, I'm using jQuery.

Obviously, this code needs to be included in both pages. Or you could include the checking part in the destination page and click function in source page.

$(document).ready(function () {

    // Check if the # exists in the url
    if(window.location.hash) {

        // Get the position like in the javascript snippet above
        var scrollPoint = $(window.location.hash).offset().top - 
        (window.innerHeight / 2);

        // jump to that element
        $(window).scrollTop(scrollPoint);
    }

    $('.link').click(function (e) {

        e.preventDefault();

        // Redirect to the link
        window.location.href = this.attr('href');
    }); 
});