2

I have a click event which I want when is fired, window scroll to the specific coordinates

<div class="col-xs-12 responsiveView">
<div class="row" id="selectedDay"></div>
<div class="responsiveOrders"></div>
<div class="responsiveNewOrders row">
    <div class="orderMenuTitle">

    </div>
</div>

,so far I have used the codes below in reference to the jQuery scroll to element and How to go to a specific element on page?

$('html').animate({
   scrollTop: $(".responsiveView").offset().top
}, 1000);

and

var x = $('.responsiveView').offset().left;
var y = $('.responsiveView').offset().top;
window.scrollTo(x,y);

animate works fine on browser's responsive view but none of them works on an actual iphone. I have searched a lot and this is not a duplicate! your help is appreciated in advance.

H.Sdq
  • 597
  • 1
  • 9
  • 21
  • 1
    I believe if you are using a click event listener, a mobile device will not register that because mobile devices use on touch events. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events – Jake Boomgaarden Dec 16 '17 at 10:20
  • the click event works because ajax is sent and data is displayed, the problem is scrolling – H.Sdq Dec 16 '17 at 13:26

2 Answers2

0

I tried the same approach

$('html, body').animate({
     scrollTop: $(".responsiveView").offset().top
}, 1000);

and it worked, the problem was that I tried to scroll the page before the specific box (element with responsiveView class) was fully loaded, so I put the above code on the callback of my function (when data was loaded and box was fully visible) and it works.

H.Sdq
  • 597
  • 1
  • 9
  • 21
0

The answer might work for some people but if doesn't work for you can use setTimeOut() to execute the function.

  setTimeout(function(){
     $('html').animate({
     scrollTop: $(".responsiveView").offset().top
     }, 1000)
   }, 100);
Johnyoat
  • 368
  • 3
  • 13