nextH

by noromanba 2017-01-08 [2017/01/08 00:44:02]
(Forked from ↓Headings by noromanba)

scroll into next headings (h1-6)

@@ -1,60 +1,32 @@
 /*
- * @title ↓Headings
+ * @title nextH
  * @description scroll into next headings (h1-6)
  * @include http://*
  * @include https://*
- * @contributor yuggrdrasill  http://let.hatelabo.jp/yuggrdrasill/let/gYC-xqSB3eS6NA (Fork of)
- * @license MIT License https://opensource.org/licenses/MIT
+ * @contributor yuggrdrasill  http://let.hatelabo.jp/yuggrdrasill/let/gYC-xqSB3eS6NA
+ * @contributor noromanba     http://let.hatelabo.jp/noromanba/let/hLHWrpDmo_lO (Fork of)
+ * @license MIT License       https://opensource.org/licenses/MIT
  * @javascript_url
  */
 
-// TBD
-// - omit jQuery
-// - replace to ES6+/ES2015+
-(function() {
-
-'use strict';
-
-var currentPosition = function() {
-  return document.documentElement.scrollTop || document.body.scrollTop;
-};
-
-var move = function() {
-  var jQuery = window.jQuery;
-
-  jQuery(':header').each(function() {
-    var offsetTop = Math.floor(jQuery(this).offset().top);
-
-    if (offsetTop > currentPosition()) {
-      jQuery('html, body').animate({
-        scrollTop: offsetTop
-      }, 100);
-      return false;
-    }
-  });
-};
-
-if (window.jQuery) {
-  move();
-} else {
-  var script = document.createElement('script');
-  // must be needs versioned URL c.f.
-  // https://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/
-  //  XXX always 1.11.1
-  //      https://code.jquery.com/jquery.min.js
-  //      jQuery 1.x latest stable: 1.12.4
-  script.src = 'https://code.jquery.com/jquery-git.min.js';
-  //script.src = 'https://code.jquery.com/jquery-3.1.1.min.js';
-  //script.src = 'https://code.jquery.com/jquery-3.1.1.slim.min.js';
-  //script.src = 'https://code.jquery.com/jquery-1.x-git.min.js';
-
-  script.addEventListener('load', function() {
-    move();
-  });
-
-  var wall = document.head || document.body || document.documentElement;
-  wall.appendChild(script);
-}
-
-})();
+Array.from(document.body.querySelectorAll([
+  Array.from(Array(6).keys(), n => 'h' + (n + 1))
+])).some(heading => {
+  // current scrolling values
+  //    window.scrollY
+  //    window.pageYOffset
+  //    document.documentElement.scrollTop
+  //    document.body.scrollTop
+  const absHPos = (heading.getBoundingClientRect().top + document.body.scrollTop) | 0;
+  if (absHPos > document.body.scrollTop) {
+    heading.scrollIntoView();
+    return true;
+  }
+});
+
+/* DBG
+Array.from(document.body.querySelectorAll([
+  Array.from(Array(6).keys(), n => 'h' + (n + 1))
+]), h => console.log(h.tagName, h.textContent.trim(), h.offsetTop, h.getBoundingClientRect()))
+*/
 

• /*
   * @title nextH
   * @description scroll into next headings (h1-6)
   * @include http://*
   * @include https://*
   * @contributor yuggrdrasill  http://let.hatelabo.jp/yuggrdrasill/let/gYC-xqSB3eS6NA
   * @contributor noromanba     http://let.hatelabo.jp/noromanba/let/hLHWrpDmo_lO (Fork of)
   * @license MIT License       https://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  Array.from(document.body.querySelectorAll([
    Array.from(Array(6).keys(), n => 'h' + (n + 1))
  ])).some(heading => {
    // current scrolling values
    //    window.scrollY
    //    window.pageYOffset
    //    document.documentElement.scrollTop
    //    document.body.scrollTop
    const absHPos = (heading.getBoundingClientRect().top + document.body.scrollTop) | 0;
    if (absHPos > document.body.scrollTop) {
      heading.scrollIntoView();
      return true;
    }
  });
  
  /* DBG
  Array.from(document.body.querySelectorAll([
    Array.from(Array(6).keys(), n => 'h' + (n + 1))
  ]), h => console.log(h.tagName, h.textContent.trim(), h.offsetTop, h.getBoundingClientRect()))
  */
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。