How to load page to particular element with load()

Question

I have content that will be reload with load() on each time checkbox is selected/unselected.

The problem is when content is to hight and you need to scroll down after every load page is going on top and you need to scroll down again is there anyway to display page at same position ?

For example if you use click on group Height then to load page on href #126

i was thinking to use scrollTop element after page reload but is look terrible for user experience

     <div class="filters">
      <div class="filter-wrapper">
        <div class="group">
          <a href="#5">Width</a>
          <div class="options">
            <input type="checkbox" name="" value="10 m">
            <input type="checkbox" name="" value="20 m">
            <input type="checkbox" name="" value="30 m">
          </div>
        </div>
        <div class="group">
          <a href="#126">Height</a>
          <div class="options">
            <input type="checkbox" name="" value="100 kg">
            <input type="checkbox" name="" value="200 kg">
            <input type="checkbox" name="" value="300 kg">
          </div>
        </div>
        <div class="group">
          <a href="#38">Color</a>
          <div class="options">
            <input type="checkbox" name="" value="Green">
            <input type="checkbox" name="" value="Red">
            <input type="checkbox" name="" value="Blue">
          </div>
        </div>
      </div>
    </div>

    
    <script type="text/javascript">
      $('.option input').click(function(){
        $('.filter-wrapper').load('index.php?route=product/filter&path=<?php echo $path ?>'+selected_filters);
      })
    </script>

@Barmar to show page at position where you click on checkbox because now after load() page is scrolled to the top and you have to scroll down again — bobi, Jul 27 '22 at 08:31
The title and the question are asking two completely different things. — Rory McCrossan, Jul 27 '22 at 08:45
Perhaps you could add additional HTML/css/js to your snippet to demonstrate the issue? — freedomn-m, Jul 27 '22 at 09:18
Does this question help? [scroll to element](https://stackoverflow.com/questions/6677035/scroll-to-an-element-with-jquery) - add it in the `.load` callback. — freedomn-m, Jul 27 '22 at 09:20

Lypyrhythm · Answer 1 · 2022-07-27T09:55:50.580

1

After loading the page, you can use element.getBoundingClientRect().top + window.scrollY to retrieve the relative position of the element on the document (in this case the clicked checkbox). Use window.scrollTo(0, 0); to scroll to that position, so that the user does not have to scroll down to the checkbox.

edited Jul 27 '22 at 09:55

answered Jul 27 '22 at 08:37

Lypyrhythm

324
2
13

Sushant Bassi · Accepted Answer · 2022-07-27T09:53:44.793

As you have mentioned that the page automatically reloads whenever a checkbox is clicked. So keeping that thing in mind the code mentioned below will work.

 $(document).ready(function (e) {
    //fetch the location of the div that is clicked
    $('.options').click(function (e) {
        var x = e.pageX;
        var y = e.pageY;

        //save the x,y coordinates in a cookie
        $.cookie('xCord', x);
        $.cookie('yCord', y);
    });

   //fetch the cookie saved after click event and store it in a var
   var xCord = $.cookie("xCord");
   var yCord= $.cookie("yCord");

   //check if the saved cookie is set and is not empty
   if(typeof(xCord) != "undefined" && xCord !== null && typeof(yCord) != "undefined" && yCord!== null) {
       scrollWin(xCord,yCord);
   }

   function scrollWin(x,y) {
       window.scrollTo(x,y);
   }
});

@bobi If the solution worked an upvote on this answer will be helpful :) — Sushant Bassi, Jul 29 '22 at 11:49

How to load page to particular element with load()

2 Answers2