PC端 -- 导航活动跳转 -- 锚点动画跳转

初始化

init(); // 初始化

绑定方法

/**

* 绑定方法

*/

function init() {

    browserVersions(); // 浏览器版本添加class 必须第一运行

    headerNavBarEvent(); // 顶部导航事件
}

具体事件

/**

* 顶部导航事件

*/

function headerNavBarEvent() {

    /*首页跳转*/

    $('#to_home, .navbar-brand').click(function () {

        var preHeight = 0;

        navLinkJumpAnimate(preHeight);

});



/*水源跳转*/

$('#to_water').click(function () {

    var preHeight = $('#home').height();

    navLinkJumpAnimate(preHeight);

});



/*产品跳转*/

$('#to_product').click(function () {

    var preHeight = $('#home').height() + $('#water').height();

    navLinkJumpAnimate(preHeight);

});



/*动态跳转*/

$('#to_dynamic').click(function () {

    var preHeight = $('#home').height() + $('#water').height() + $('#product').height() + (parseInt($('.dynamic-img').css('margin-top')) / 2);

    navLinkJumpAnimate(preHeight);

});



/*动态给导航添加类*/

$('.nav-target-li').children('li').click(function () {

    $(this).addClass('active').siblings().removeClass('active');

});

}

导航活动跳转

/**
* 导航活动跳转
* @param {number} preHeight 指定高度
*/
function navLinkJumpAnimate(preHeight) {
    var isMobile = $('html').hasClass('mobile');
    var el = '';
    // 兼容移动与pc部分不支持 $("html").animate({scrollTop: 0})
    if (isMobile || navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        window.scrollTo(0, preHeight);
    } else {
        $('html, body').animate({ scrollTop: preHeight });
    }
}