animate when window.location.hash changes

Question

so i'm trying to get a site gallery-like, i have the articles that spreads all across the page and my idea is that when i get an action from the user the site jumps to the next article. I have done a lot of work so far and it's a couple of days i'm behind javascript, i'm using jquery and the code is this

$('body').ready(function () {
    var tpScroll = 0;
    var SelArticles = $('#content').find('.bgjs');
    var NumArticles = SelArticles.length;
    window.location.hash = SelArticles.first().attr('id');


    $(window).bind('mousewheel', function (event, delta, deltaX, deltaY) {
        event.preventDefault();
        console.log(delta, deltaX, deltaY);
        console.log(tpScroll);
        if (delta < 0) {
            if (tpScroll >= (NumArticles - 1)) {
                tpScroll = 0;
            } else {
                tpScroll = tpScroll + 1;
            }
            var pgid = SelArticles.eq(tpScroll).attr('id');
            window.location.hash = pgid;
        } else {
            if (tpScroll <= 0) {
                tpScroll = (NumArticles - 1);
            } else {
                tpScroll = tpScroll - 1;
            }
            var pgid = SelArticles.eq(tpScroll).attr('id');

            window.location.hash = pgid;
        }
    });
});

i managed to handle the mousewheel event to make the hash change, but i want to prevent the default scroll to the content adding a smooth animation. I'm not a monster in javascript (neither jquery) as you can see , but it's kind of working, i don't even know if it's possible to prevend this behavior, or to work around it... any suggestion?

Answer 1

我只是完全改变了方法，我使用了wiselinks处理历史API，事实证明这是一个不错的选择