09.05 让页面滚动方法

Element.scrollIntoView(): 让当前的元素滚动到浏览器窗口的可视区域内;

可选参数:
    Boolean:true / false  (默认值true)
    element.scrollIntoView();   // 等同于element.scrollIntoView(true) 
    element.scrollIntoView(false);   // scrollIntoViewOptions: {block: "end", inline: "nearest"}                  
    Object
      behavior:定义缓动动画, "auto", "instant", 或 "smooth" 之一 默认为 "auto";
      block:定义对齐方式,"start", "center", "end", 或 "nearest"之一。默认为 "start"。
      inline:"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

Window.scrollBy()与Window.scrollTo()

  window.scrollBy({ top: 100, left: 0, behavior: 'smooth' });

  window.scroll / window.scrollTo
  window.scroll({ top: 2500, left: 0, behavior: 'smooth' });

CSS属性scroll-behavior

  .module {  scroll-behavior: [ auto | smooth ]; }

Jquery

  function enterSite(){
    $('html, body').stop().animate({
        scrollTop: $('#content').offset().top
    }, 1500);
  });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容