錨標簽在觸摸屏設備中無法正常工作

Question

我在頁面底部有一個錨點 ，我用它來滾動到頁面頂部（到標題）。

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%;
}

我正在使用以下jquery來順利滾動

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

現在，當我觸摸這個錨標簽時，我的觸摸設備 ，頁面按照我想要的順利滾動到頂部 （到標題），但當我再次嘗試向下擦動向下滾動頁面時 ， 頁面向下滾動但它再次自動滾動順利地走向頂峰 。 我要擦拭3-4次 ，最后向下滾動 ，使頁面在該位置保持穩定 。

滾動功能在桌面和非觸摸設備中 工作得非常好 ，但在觸摸設備中完全無法正常工作 。

我認為問題在於jquery滾動無法理解觸摸事件 。

有沒有辦法解決這個問題。 提前致謝。

Answer 1

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

還嘗試添加一些帶偏移的值，它為錨元素定位點，所以用這個添加一些值

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