window.onload = function(){
scrollToAnchor();
};
// 监听地址栏url的hash值改变时,检查是否需要定位锚点
window.onhashchange = function(){
scrollToAnchor();
};
function scrollToAnchor(){
var hash = getHash(), // 获取url的hash值
anchor = getAnchor(hash), // 获取伪锚点对应的真锚点值
anchorDom, // 伪锚点dom对象
anchorScrollTop; // 伪锚点距离页面顶部的距离
// 如果不存在伪锚点,则直接结束
if(anchor.length < 1){
return;
}
anchorDom = getDom(anchor); // 获取需要滚动内容的id
anchorScrollTop = anchorDom.offsetTop; //距离顶部的距离
animationToAnchor(document.body.scrollTop, anchorScrollTop);
}
function animationToAnchor(startNum, stopNum){
var nowNum = startNum + 100; // 步进为10
if(nowNum > stopNum){
nowNum = stopNum;
}
// 缓动方法
window.requestAnimationFrame(function(){
if(document.documentElement && document.documentElement.scrollTop) {
document.scrollingElement.scrollTop = nowNum;
} else if(document.body) {
document.body.scrollTop = nowNum;
}
// 滚动到预定位置则结束
if(nowNum == stopNum){
return;
}
animationToAnchor(nowNum, stopNum); // 只要还符合缓动条件,则递归调用
});
}
// 获取锚点id
function getAnchor(str){
return checkAnchor(str) ? str.split("w_")[1] : "";
}
// 判断是否为特殊的hash值,也即是否为伪锚点
function checkAnchor(str){
return str.indexOf("w_") == 0 ? true : false;
}
// 获取hash值
function getHash(){
return window.location.hash.substring(1);
}
// 获取dom对象
function getDom(id){
return document.getElementById(id);
}
加入了jquery的animatin方法
window.onload = function(){
scrollToAnchor();
};
// 监听地址栏url的hash值改变时,检查是否需要定位锚点
window.onhashchange = function(){
scrollToAnchor();
};
function scrollToAnchor(){
var hash = getHash(), // 获取url的hash值
anchor = getAnchor(hash), // 获取伪锚点对应的真锚点值
anchorDom, // 伪锚点dom对象
anchorScrollTop; // 伪锚点距离页面顶部的距离
// 如果不存在伪锚点,则直接结束
if(anchor.length < 1){
return;
}
anchorDom = getDom(anchor); // 获取需要滚动内容的id
anchorScrollTop = anchorDom.offsetTop; //距离顶部的距离
animationToAnchor(document.body.scrollTop, anchorScrollTop);
}
function animationToAnchor(startNum, stopNum){
// 锚点id距离顶部一定距离(这里是距离顶部90px)
$("html,body").animate({scrollTop: (stopNum-90) + "px"}, 1000);
}
// 获取锚点id
function getAnchor(str){
return checkAnchor(str) ? str.split("w_")[1] : "";
}
// 判断是否为特殊的hash值,也即是否为伪锚点
function checkAnchor(str){
return str.indexOf("w_") == 0 ? true : false;
}
// 获取hash值
function getHash(){
return window.location.hash.substring(1);
}
// 获取dom对象
function getDom(id){
return document.getElementById(id);
}
网友评论