前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Javascript代码

Javascript代码

作者头像
Qwe7
发布2022-01-31 10:02:44
5290
发布2022-01-31 10:02:44
举报
文章被收录于专栏:网络收集网络收集

代码实现

jQuery 实现锚链接捕捉并平滑滚动

代码语言:javascript
复制
$(document).ready(function() {
  if (
    typeof window.getComputedStyle(document.body).scrollBehavior === "undefined"
  ) {
    //判断浏览器是否支持scroll-behavior
    $("a.article").click(
      //给class为article的a标签赋予点击事件
      function() {
        $("html,body").animate(
          //令窗口滚动
          { scrollTop: $($(this).attr("href")).offset().top }, //滚动到当前点击的a标签的锚链接对应的位置
          { duration: 500, easing: "swing" } //滚动时间和滚动效果
        );
        return false;
      }
    );
  }
});

scroll_to(Yposition) 平滑滚动函数

代码语言:javascript
复制
function scroll_to(Yposition) {
  if (
    typeof window.getComputedStyle(document.body).scrollBehavior === "undefined"
  ) {
    //判断浏览器是否支持scroll-behavior属性
    if (!window.requestAnimationFrame) {
      //判断浏览器是否支持requestAnimationFrame
      window.requestAnimationFrame = function(callback) {
        setTimeout(callback, 20);
      }; //本质是利用setTimeout来处理scrollTo函数(js是单线程,为了避免堵塞)
    } //如果不支持就手动定义(利用setTimeout)
    let scrollposition = pageYOffset; //得到窗口已滚动高度
    function smoothScroll() {
      //数字10代表了速度的衰减率,数字越小完成滚动的时间就越少
      let distance = Yposition - scrollposition;
      scrollposition = scrollposition + distance / 10;
      if (Math.abs(distance) < 1) {
        //如果距离小于1,结束递归函数
        window.scrollTo(0, Yposition);
      } else {
        window.scrollTo(0, scrollposition);
        requestAnimationFrame(smoothScroll);
      }
    }
    requestAnimationFrame(smoothScroll); //在smoothScroll函数里递归调用,直到距离小于1
  } else {
    //对于支持scroll-behavior属性的浏览器,直接执行scrollTo函数
    window.scrollTo(0, Yposition);
  }
}

子导航栏动画

代码语言:javascript
复制
function appear() {
  document.getElementById("sub_navigation_bar").style.right = "10px";
  setTimeout(function() {
    document.getElementById("sub_navigation_bar_button").onclick = disappear;
  }, 0);
}
function disappear() {
  document.getElementById("sub_navigation_bar").style.right = "-150px";
  setTimeout(function() {
    document.getElementById("sub_navigation_bar_button").onclick = appear;
  }, 0);
}

展开全文和收起全文函数

代码语言:javascript
复制
function text_appear(object) {
  //展开全文函数
  x = object.previousSibling; //上一个节点
  if (x.nodeType != 1) {
    x = x.previousSibling;
  }
  x.style.display = "block";
  y = x.previousSibling;
  if (y.nodeType != 1) {
    y = y.previousSibling;
  }
  y.style.display = "none";
  object.innerHTML = "收起全文";
  object.onclick = function() {
    text_disappear(object);
  };
}
function text_disappear(object) {
  //收起全文函数
  x = object.previousSibling;
  if (x.nodeType != 1) {
    x = x.previousSibling;
  }
  x.style.display = "none";
  y = x.previousSibling;
  if (y.nodeType != 1) {
    y = y.previousSibling;
  }
  y.style.display = "block";
  object.innerHTML = "展开全文";
  object.onclick = function() {
    text_appear(object);
  };
}

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码实现
    • jQuery 实现锚链接捕捉并平滑滚动
      • scroll_to(Yposition) 平滑滚动函数
        • 子导航栏动画
          • 展开全文和收起全文函数
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档