Question

首先感谢您花时间阅读我的问题。我正在尝试创建一个普通链接（href），链接回一页并滚动到div id。我一直在看这个问题：Here。这正是我想要的。所以我在我的标题中链接了JavaScript文件，并将jQuery代码放在我的页脚中。但它没有任何作用。

这是我的链接：

<div class="col-xs-4 text-center">
    <a href="/the_liked_page/" data-id="my_id" class="gobackandscroll"><i class="fa fa-th-large fa-2x" aria-hidden="true"></i><br>Go back</a>
</div>

没什么好看的...这是脚本：

// Read the cookie and if it's defined scroll to id
var scroll = jQuery.cookie('scroll');
if(scroll){
    scrollToID(scroll, 1000);
    jQuery.removeCookie('scroll');
}

// Handle event onclick, setting the cookie when the href != #
jQuery('.gobackandscroll').click(function (e) {
    e.preventDefault();
    var id = jQuery(this).data('id');
    var href = jQuery(this).attr('href');
    if(href === '#'){
        scrollToID(id, 1000);
    }else{
        jQuery.cookie('scroll', id);
        window.location.href = href;
    }
});

// scrollToID function
function scrollToID(id, speed) {
    var offSet = 65;
    var obj = jQuery('#' + id).offset();
    var targetOffset = obj.top - offSet;
    jQuery('html,body').animate({ scrollTop: targetOffset }, speed);
};

我的console.log中没有任何错误，它链接到我想要的页面。但是没有滚动。

当我删除所有数据并将这两个页面标记为： http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview它确实有效。因此JavaScript正确加载并存储cookie。

所以我想也许没有存储data-id所以我使用以下命令对点击发出警告：

alert(id);

这会给出正确的data-id，但这不会在下一页上滚动。有没有人知道为什么这不起作用或更好的建议呢？谢谢你的帮助...

返回一页并滚动到div ID

0 个答案: