Clever Geek Handbook

Scroll to a specific area on page load and execute Ajax Query

Good day. I need to figure out how to perform an action using Ajax as soon as I have linked to a specific section on the page. I already know how to get to the assigned DOM element on another page, but I would like to go further to take some action with ajax as soon as it triggers the visitor at that point.

eg.

<nav>
 <ul><li><a href="about.php#team"></a></li></ul>
</nav>

Take me to this page about.php under the "team" div

<div>
 <div><a name="team"></a></div>
</div>

But then I would like to trigger several Ajaxes automatically, which are usually executed when the user clicks on some object in the command div. So if the user gets to that section using the link above, it will take them straight to the content. It makes sense?

+3


source to share


6 answers


You can use jQuery scrollTo()

to scroll to an area on the page, then using a function complete

call ajax after the scroll is complete. Detailed description here



$('body').scrollTo('#target', function()
{
    // Do your AJAX Thaaang
});
+4


source


I'm going to go to a limb and assume you are using jQuery animate()

to scroll:

$('html, body').animate(
    { scrollTop: $("#something").offset().top },
    1000,
    function() {
        someAjaxFunction();
    }
);

var someAjaxFunction = function() {
    $.ajax({
        url: '/something/'
    }).done(function(data) {
        // Done!
    });
};


We use the callback function argument assigned to animate () to disable our ajax request.

+5


source


This check can be run to determine if the user has gone directly to teamDiv. Running it on page load will allow you to catch it if the user was deeply connected to teamDiv from another page:

if (/#team/.test(window.location.href)) { // perform Ajax query here... }

Note. In the example link, you are using an id team

whereas the div id attribute is set to teamDiv

. To do this, they must be the same.

+1


source


So does the code run if the user clicks on any object in the command div?

In this case, is it an option?

<div>
  <div id="teamDiv"><a name="team"></a>some element</div>
</div>

<script type="text/javascript">
 $(function() {
       $("#teamDiv").click(function() {
            //put what you want to happen when the user clicks something in
            //teamDiv here
        });
 })
 </script>
0


source


My suggestion would be to read the currently loaded url:

$(document).ready(function () {
  var location = window.location.href;
  if(location.indexOf('#team' > -1) {
    // do something
  }
}
0


source


  • You can check location.hash

    ( http://www.w3schools.com/jsref/prop_loc_hash.asp ) to determine if the hash exists.

  • If you want to do something in each navigation option for that div: click and scroll, you can use something like this:

    $(document).bind('scroll', function() { if($(this).scrollTop() > $('.your-div').top()) { alert('do something'); } })

0


source






More articles:


All Articles