锚标签在触摸屏设备中无法正常工作

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');
    }
});