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

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