zoukankan      html  css  js  c++  java
  • 锚点跳转滑动效果


    1、jquery的简易方法
    $('a[href*="#"],area[href*="#"]').click(function() {
        if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                        scrollTop: targetOffset
                    },
                    1000);
                return false;
            }
        }
    });
    

    2、原生javascript的简易方法

    //取得a标签href里有#的属性
    var a=document.getElementsByTagName("a");
    var arr=[];
    for(var i=0;i< a.length;i++){
    if(a[i].href.indexOf("#")!=-1){
    arr.push(a[i]);
    }
    }

    //如果移动就停止滚动的方法
    var bool=false;
    var body=document.getElementsByTagName("body")[0];
    body.addEventListener("mousewheel",function(){
    bool=true;
    });
    //火狐的停止滚动
    body.addEventListener("DOMMouseScroll",function(){
    bool=true;
    });
    //为a标签href里有#的标签绑定事件
    for(var i=0;i<arr.length;i++){
    arr[i].onclick=function(){
    bool=false;
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
    var target=document.getElementsByName(this.hash.slice(1))[0];
    var body=document.getElementsByTagName("body")[0];
    if(target.offsetTop<body.scrollTop){
    var timer=setInterval(function(){
    var up_top=body.scrollTop;
    body.scrollTop-=20;
    if(body.scrollTop<=target.offsetTop||body.scrollTop==up_top||bool){
    clearInterval(timer);
    }
    },1);
    }else{
    var timer=setInterval(function(){
    var up_top=body.scrollTop;
    body.scrollTop+=20;
    if(body.scrollTop>=target.offsetTop||body.scrollTop==up_top||bool){
    clearInterval(timer);
    }
    },1);
    }
    return false;
    }
    };
    }

      

  • 相关阅读:
    Linux /dev/null详解
    Linux 重定向详解
    Linux history命令详解
    Linux echo命令详解
    Linux alias命令详解
    Linux fsck命令详解
    Linux blkid命令详解
    Linux mount命令详解
    Linux dd命令详解
    Linux free命令详解
  • 原文地址:https://www.cnblogs.com/huangqiming/p/6043325.html
Copyright © 2011-2022 走看看