Page doesn't scroll on click when on mobile

Asked Jul 25 '19 at 22:11

Active Jul 25 '19 at 22:11

Viewed 15 times

I have a button on my website which when clicked, scrolls down to the next section. This works on desktop but not on an ipad or iphone.

I have tried both "touchstart" and "vclick" events. I have tried adding cursor: pointer.

HTML

<div id="icon-div">
 <button id="icon-about" class="raise">LEARN MORE
 <br>
  <i id="arrow" class="fas fa-arrow-down fa-2x"></i>
 </button>
</div>

Javascript


$('#icon-about').bind("click", function(event) {
 event.stopPropagation()
 $('html').stop().animate(
  {scrollTop: $('#about').position().top -20
  }, 500, 'swing');
});

Nothing happens at all with "vclick". cursor:pointer doesn't make a difference.

When I added an alert("") to test "touchstart", the alert box appeared. So I know an event fired but it didn't process the scroll code.

asked Jul 25 '19 at 22:11

szewah

Have you tried to i.e: alert the value of `$('#about').position().top` on mobile ? – Roko C. Buljan Jul 25 '19 at 22:13
Also, jQuery's `.bind` is deprecated from v.3.0 in favor of `.on()` method. – Roko C. Buljan Jul 25 '19 at 22:14
1

have you tried to use `$('html, body')`? – Roko C. Buljan Jul 25 '19 at 22:15
@RokoC.Buljan This question is not a duplicate of the one marked. – Evik Ghazarian Jul 25 '19 at 22:41
@RokoC.Buljan$(html, body') works. How do I make your comment the right answer for this question? – szewah Jul 25 '19 at 23:02

Page doesn't scroll on click when on mobile

0 Answers0