他们是如何建立新的Foxy Bingo网站的

时间:2015-12-31 13:45:08

标签: javascript jquery html html5

Foxy Bingo刚刚推出了一个新网站www.foxybingo.com,它充当了一个寻呼机,这意味着您点击主菜单项及其向下滚动页面。

但是,当您点击链接时,网址将会更改,而不是正常的#anchor,而是bingo.html。

另外有趣的是,如果我访问www.foxybingo.com/bingo.html,它会在加载时向下滚动到页面的正确部分,但会显示不同的元标题。

编辑:

如何将多个HTML文件导入到像foxy那样的一个页面中?

1 个答案:

答案 0 :(得分:0)

该网站不包含多个网页,但使用history api pushstate更改网址名称(如使用jQuery代码):

var $win = $(window);
$('a#bar').click(function() {
    anim_jump($('#bar'));
    history.pushState(null, "page 2", "bar.html");
});

window.onpopstate = function(event) {
  var file = document.location.replace(/.*\//, '');
  $('html, body').prop('scrollTop', $('#' + file.replace(/.html$/)).offset().top);
};
function anim_jump(item) {
    $('html, body').animate({
        scrollTop: item.offset().top
    }, 2000);
}