Question

我目前正在开发一个网站，该网站使用下面的javascript代码为href内的目标元素设置动画。如果根据它的历史点击后退/前进按钮，我将如何让代码动画化。

/* ------  Smooth Scroll ----- */

$(document).ready(function() {
    "use strict";
    $('a[href*=#]').bind('click', function(e) {
        e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump

        var target = $(this).attr("href"); //Get the target

        // perform animated scrolling by getting top-position of target-element and set it as scroll target
        $('html, body').stop().animate({ scrollTop: $(target).offset().top}, 2000, function()
        {
            location.hash = target;  //attach the hash (#jumptarget) to the pageurl
        });

        return false;
    });

});

Answer 1

您需要侦听哈希更改。有很多方法可以做到这一点。您可以轮询哈希更改或使用HTML5的历史记录api和onhashchange方法来监听更改。最简单的方法是使用某种已经处理过这两种情况的库。如果您使用的是jquery，我建议使用jquery插件。如果您使用角度js或其他东西，那么寻找这些插件。

你会做类似

的事情

$(window).hashchange( function(){
  // Do the animation here
})

您不再需要a点击动画。

基于哈希变化的动画滚动

1 个答案: