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;
    }
    };
    }

      

  • 相关阅读:
    leetCode 53. maximum subarray
    leetcode strStr()
    DCNN models
    1*1 的卷积核
    leetcode 14. longest common prefix
    springMVC接受json并打开新页面
    jsp取addFlashAttribute值深入理解即springMVC发redirect传隐藏参数
    hive安装教程本地模式
    poi excel超出65536行数限制自动扩展Invalid row number (65536) outside allow
    java 构造json对象数组
  • 原文地址:https://www.cnblogs.com/huangqiming/p/6043325.html
Copyright © 2011-2022 走看看