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

目录

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

① 初始化

② 绑定方法

③ 具体事件

④ 导航活动跳转

⑤ 兼容移动与pc部分不支持 $("html").animate({scrollTop: 0}) 

二、其他相关：

① 前端如何实现懒加载图片：

② 自定义loading动画：

③ jQuery2.x 适配兼容 IE9+总结：

④ 特殊的CSS样式

⑤  HTML5 和 CSS3 的兼容问题

⑥ 用CSS绘制一个三角形

⑦ 强制中英文换行及超出显示省略号的问题

⑧ 在移动端适配中，1 像素边框高清如何实现？

---

一、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 });
    }
}

⑤ 兼容移动与pc部分不支持 $("html").animate({scrollTop: 0}) 

    // 兼容移动与pc部分不支持 $("html").animate({scrollTop: 0})
    if (isMobile || navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        window.scrollTo(0, preHeight);
    } else {
        $('html, body').animate({ scrollTop: preHeight });
    }

二、其他相关：

① 前端如何实现懒加载图片：

前端如何实现懒加载图片_小草莓蹦蹦跳的博客-CSDN博客

② 自定义loading动画：

loading效果_loading效果图_小草莓蹦蹦跳的博客-CSDN博客 

③ jQuery2.x 适配兼容 IE9+总结：

Vue2.x 和 jQuery2.x 适配兼容 IE9+总结_vue2 兼容ie9_小草莓蹦蹦跳的博客-CSDN博客 

④ 特殊的CSS样式

特殊的CSS样式_小草莓蹦蹦跳的博客-CSDN博客

⑤  HTML5 和 CSS3 的兼容问题

HTML5 和 CSS3 的兼容问题_小草莓蹦蹦跳的博客-CSDN博客

⑥ 用CSS绘制一个三角形

用CSS绘制一个三角形_小草莓蹦蹦跳的博客-CSDN博客 

⑦ 强制中英文换行及超出显示省略号的问题

强制中英文换行及超出显示省略号的问题_ellipsis 强制单词换行_小草莓蹦蹦跳的博客-CSDN博客

 

⑧ 在移动端适配中，1 像素边框高清如何实现？

在移动端适配中，1 像素边框高清如何实现？_小草莓蹦蹦跳的博客-CSDN博客