Anchor tag is not working properly in touch screen devices

Question

I've an anchor at the bottom of the page, which I am using to scroll to top of the page (to header).

HTML:

<script type="text/javascript">Sys.Application.add_load(BindEventToScrolls);</script><%--Since I've achor tag within update panel, to rebind the jquery events after upade panel udates, I am using this line of code--%>
<a class="scrollToTopImg" href="#Header"></a>

CSS:

.scrollToTopImg
{
    background-repeat: no-repeat;
    background-position: right bottom;
    position: fixed;
    bottom: 34px;
    z-index: 999;
    right: 5px;
    color:#c1b38e;
    width:30px;
    height:30px;
    background-image: url('../Images/scrollToTop.png');
    background-size:100% 100%;
}

I am using following jquery to scroll smoothly

Jquery:

//BindEventToScrolls() is js function to rebind jquery events after update panel is updated
    function BindEventToScrolls() {
                $(document).ready(function () {
                    $('a').click(function () {
                        $('html, body').animate({
                            scrollTop: $($.attr(this, 'href')).offset().top
                        }, 2000);
                        return false;
                    });
                });
            }

Now in my touch device when I touch this anchor tag, the page scrolls to the top (to header) smoothly as exactly I wanted, but when I again try to wipe down to scroll page down, the page scrolls down but it again automatically scrolls smoothly towards top. I've to wipe down 3-4 times to finally scroll down and make page stay stable at that position.

The scrolling functionality is working exactly fine in desktop and non touch devices, but it is not at all working properly in touch devices.

I think the problem is with the jquery scroll which is not able to understand the touch events.

Is there any way to solve this problem. Thanks in advance.

Answer 1

function BindEventToScrolls() {
                $(document).ready(function () {
                    $('a').click(function () {
                        $('html, body').animate({
                            scrollTop: $($.attr(this, 'href')).offset().top
                        }, 2000);
                        event.preventDefault();
                    });
                });
            }

also try to add some values with offset it locate points for anchor element so add some value with this

Answer 2

var touchstart;
var touchend;
jQuery('.scrollableArea .expanded.dropdown').on('touchstart',function(e) {
    touchstart = e.originalEvent.touches[0].clientX;
//console.log(touchstart);
});
jQuery('.scrollableArea .expanded.dropdown').on('touchend', function(e) {
    touchend = e.originalEvent.changedTouches[0].clientX;
//console.log(touchend );
    if(touchend==touchstart) {
//console.log("Yesss"+jQuery(this).find('a').attr('href'));
     window.location = jQuery(this).find('a').attr('href');
    }
});