OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

JS动态滑动切换到页面指定位置


分享到


分类 JS学习   关键字 JavaScript   发布 ourjs  1527906178548
注意 转载须保留原文链接,译文链接,作者译者等信息。  


方法一:window.scroll

将页面动态划到指定的位置。

浏览器:IE11以上

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});
// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

方法二:element.scrollIntoView


浏览器:IE11

划到指定的元素的位置。

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

方法二:jQuery


划到指定的锚点位置,兼容所有浏览器

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });


原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 怎样使用OnceAir搭建局域网内的文件共享服务器
  2. 怎样将Android手机中的照片和视频,通过APP自动同步备份到OnceAir云盘的共享目录中
  3. nodejs视频教程集合附带源码和笔记
  4. html5弹出式网页mp4视频播放器
  5. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - JS学习
  1. 如何通过网页、客户端、手机APP、路由器查找OnceAir NAS网盘的内网访问地址
  2. JavaScript用new Image实现内网服务器端口扫描
  3. 如何收集捕获Node中的未处理的错误异常信息?
  4. Node.JS循环删除非空文件夹及子目录下的所有文件
  5. Node.js 和 JavaScript 的最新版 npm 导致 Linux 系统崩溃,迫使用户重装系统!
  6. 用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)
  7. 如何用Bootstrap免费网站模板和OnceAir云盘搭建个人网站服务器
  8. Node.JS高效压缩解压zip文件:将child_process执行结果输入stdout流
  9. Node.JS段点续传:Nginx配置文件分段下载功能实现
  10. Node.JS如何查看本地MAC/IP地址、计算cpu使用率和内存容量

 关键字 - JavaScript
  1. 用JavaScript实现node.js中的path.join方法
  2. 如何用CSS将select/option文本居中或居右对齐
  3. JavaScript中新建一个带全局变量参数的new Function动态函数
  4. 设置select元素中option的默认值
  5. 在JavaScript中创建命名空间的几种写法
  6. JavaScript中NaN的秘密
  7. JavaScript用Number/parseInt/parseFloat判断字符串是否为数字
  8. 为JavaScript设计一个指数操作(运算)符
  9. 用JavaScript将input/textarea中的文本复制粘贴到剪切板
  10. JS动态滑动切换到页面指定位置

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号