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 scroll ，它无法理解触摸事件。

有没有办法解决这个问题。提前谢谢。

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

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

2 个答案: