Skip to content

Instantly share code, notes, and snippets.

@hideya

hideya/smooth-scroll-anchors.js

Last active February 15, 2019 07:07
Show Gist options
  • Save hideya/f1e36c559a861e15008e39c81f1531da to your computer and use it in GitHub Desktop.
Save hideya/f1e36c559a861e15008e39c81f1531da to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hideya revised this gist Feb 15, 2019. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions smooth-scroll-anchors.js
    View file
    Original file line number Diff line number Diff line change
    @@ -43,14 +43,14 @@ function scrollToElem(target, bias, duration) {
    };
    animateScroll();

    //t = current time
    //b = start value
    //c = change in value
    //d = duration
    // t = current time
    // b = start value
    // c = change in value
    // d = duration
    function easeInOutQuad(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
    return -c / 2 * (t * (t - 2) - 1) + b;
    };
    }
  2. hideya revised this gist Sep 19, 2018. 1 changed file with 8 additions and 64 deletions.
    72 changes: 8 additions & 64 deletions smooth-scroll-anchors.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,61 +1,12 @@

    // Flux Wrap Animation
    // Automatically make all anchors to an ID'ed in-page element to smooth-scroll
    window.addEventListener('load', function(event) {
    var targetClassName = 'flex-wrap-anim';
    var defaultDuration = '0.3s';

    var dummyList = [];
    function addDummy(item, duration) {
    var top = item.offsetTop;
    var left = item.offsetLeft;
    setTimeout(function() {
    item.style.position = 'absolute';
    item.style.top = top + 'px';
    item.style.left = left + 'px';

    var dummyDiv = document.createElement('div');
    dummyDiv.classList.add(targetClassName + '-dummy');
    var rect = item.getBoundingClientRect();
    dummyDiv.style.width = rect.width + 'px';
    dummyDiv.style.height = rect.height + 'px';
    dummyDiv.style.visibility = 'hidden';
    dummyDiv['__' + targetClassName + '_pair'] = item;
    dummyDiv['__' + targetClassName + '_duration'] = duration;
    item.parentNode.appendChild(dummyDiv);
    dummyList.push(dummyDiv);
    }, 0);
    var duration = 300; // ms
    var bias = 0; // px
    var header = document.getElementsByTagName('header')[0];
    if (header) {
    bias = -header.getBoundingClientRect().height - 40;
    }

    var conts = document.getElementsByClassName(targetClassName);
    for (var i = 0, max = conts.length; i < max; i++) {
    var cont = conts[i];
    cont.style.positoin = 'relative';
    var duration = cont.getAttribute('data-duration')
    || defaultDuration;
    var items = cont.getElementsByTagName('div');
    for (var i = 0, max = items.length; i < max; i++) {
    addDummy(items[i], duration);
    }
    }

    window.addEventListener('resize', function(event) {
    dummyList.forEach(function(dummyDiv) {
    var item = dummyDiv['__' + targetClassName + '_pair'];
    var duration = dummyDiv['__' + targetClassName + '_duration'];
    if (item.offsetTop != dummyDiv.offsetTop) {
    item.style.transition = 'all ' + duration;
    item.style.top = dummyDiv.offsetTop + 'px';
    item.style.left = dummyDiv.offsetLeft + 'px';
    } else {
    item.style.transition = '';
    item.style.left = dummyDiv.offsetLeft + 'px';
    }
    });
    });
    });

    // Automatically make all anchors to an ID'ed in-page element to smooth-scroll
    window.addEventListener('load', function(event) {
    var anchors = document.getElementsByTagName("a");
    for (var i = 0, max = anchors.length; i < max; i++) {
    var anchor = anchors[i];
    @@ -66,13 +17,10 @@ window.addEventListener('load', function(event) {
    anchor.addEventListener("click", function(e) {
    e.preventDefault();
    var href = this.getAttribute("href");
    window.history.pushState({name : href}, null, href);
    var name = href.substring(1);
    var target = document.getElementById(name);

    var targetTop = (!target) ? 0 : target.getBoundingClientRect().top;
    var currentTop = document.documentElement.scrollTop;
    var diff = Math.abs(targetTop - currentTop);
    scrollToElem(target, -80, 100 + diff /4);
    scrollToElem(target, bias, duration);
    });
    }
    });
    @@ -106,7 +54,3 @@ function scrollToElem(target, bias, duration) {
    return -c/2 * (t*(t-2) - 1) + b;
    };
    }

    function mailToMe() {
    window.location.href = "mailto:" + "info" + "@" + "0-1.link";
    }
  3. hideya revised this gist Sep 19, 2018. 1 changed file with 65 additions and 10 deletions.
    75 changes: 65 additions & 10 deletions smooth-scroll-anchors.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,60 @@

    // Flux Wrap Animation
    window.addEventListener('load', function(event) {
    var targetClassName = 'flex-wrap-anim';
    var defaultDuration = '0.3s';

    var dummyList = [];
    function addDummy(item, duration) {
    var top = item.offsetTop;
    var left = item.offsetLeft;
    setTimeout(function() {
    item.style.position = 'absolute';
    item.style.top = top + 'px';
    item.style.left = left + 'px';

    var dummyDiv = document.createElement('div');
    dummyDiv.classList.add(targetClassName + '-dummy');
    var rect = item.getBoundingClientRect();
    dummyDiv.style.width = rect.width + 'px';
    dummyDiv.style.height = rect.height + 'px';
    dummyDiv.style.visibility = 'hidden';
    dummyDiv['__' + targetClassName + '_pair'] = item;
    dummyDiv['__' + targetClassName + '_duration'] = duration;
    item.parentNode.appendChild(dummyDiv);
    dummyList.push(dummyDiv);
    }, 0);
    }

    var conts = document.getElementsByClassName(targetClassName);
    for (var i = 0, max = conts.length; i < max; i++) {
    var cont = conts[i];
    cont.style.positoin = 'relative';
    var duration = cont.getAttribute('data-duration')
    || defaultDuration;
    var items = cont.getElementsByTagName('div');
    for (var i = 0, max = items.length; i < max; i++) {
    addDummy(items[i], duration);
    }
    }

    window.addEventListener('resize', function(event) {
    dummyList.forEach(function(dummyDiv) {
    var item = dummyDiv['__' + targetClassName + '_pair'];
    var duration = dummyDiv['__' + targetClassName + '_duration'];
    if (item.offsetTop != dummyDiv.offsetTop) {
    item.style.transition = 'all ' + duration;
    item.style.top = dummyDiv.offsetTop + 'px';
    item.style.left = dummyDiv.offsetLeft + 'px';
    } else {
    item.style.transition = '';
    item.style.left = dummyDiv.offsetLeft + 'px';
    }
    });
    });
    });

    // Automatically make all anchors to an ID'ed in-page element to smooth-scroll
    window.addEventListener('load', function(event) {
    var anchors = document.getElementsByTagName("a");
    for (var i = 0, max = anchors.length; i < max; i++) {
    @@ -11,25 +68,19 @@ window.addEventListener('load', function(event) {
    var href = this.getAttribute("href");
    var name = href.substring(1);
    var target = document.getElementById(name);
    if (!target) {
    target = document.getElementsByTagName("body")[0];
    }
    if (!target) {
    return;
    }

    var targetTop = target.getBoundingClientRect().top;
    var targetTop = (!target) ? 0 : target.getBoundingClientRect().top;
    var currentTop = document.documentElement.scrollTop;
    var diff = Math.abs(targetTop - currentTop);
    scrollToElem(target, 100 + diff /4);
    scrollToElem(target, -80, 100 + diff /4);
    });
    }
    });

    // based on https://gist.github.com/andjosh/6764939
    function scrollToElem(target, duration) {
    function scrollToElem(target, bias, duration) {
    var start = window.pageYOffset;
    var to = target.getBoundingClientRect().top;
    var to = (!target) ? 0 : target.offsetTop + bias;
    var change = to - start;
    var currentTime = 0;
    var increment = 20;
    @@ -55,3 +106,7 @@ function scrollToElem(target, duration) {
    return -c/2 * (t*(t-2) - 1) + b;
    };
    }

    function mailToMe() {
    window.location.href = "mailto:" + "info" + "@" + "0-1.link";
    }
  4. hideya revised this gist Sep 18, 2018. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions smooth-scroll-anchors.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,9 @@
    // Automatically make all anchors to an ID'ed in-page element to smooth-scroll
    window.addEventListener('load', function(event) {
    var anchors = document.getElementsByTagName("a");
    for (var i = 0, max = anchors.length; i < max; i++) {
    var anchor = anchors[i];
    var href = anchor.getAttribute("href");
    if (!href.startsWith("#")) {
    if (href === null || !href.startsWith("#")) {
    continue;
    }
    anchor.addEventListener("click", function(e) {
    @@ -35,7 +34,7 @@ function scrollToElem(target, duration) {
    var currentTime = 0;
    var increment = 20;

    function animateScroll(){
    function animateScroll() {
    currentTime += increment;
    var val = easeInOutQuad(currentTime, start, change, duration);
    window.scrollTo(window.pageXOffset, val);
  5. hideya revised this gist Sep 18, 2018. No changes.
  6. hideya revised this gist Sep 18, 2018. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions smooth-scroll-anchors.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,6 @@ window.addEventListener('load', function(event) {
    var anchors = document.getElementsByTagName("a");
    for (var i = 0, max = anchors.length; i < max; i++) {
    var anchor = anchors[i];
    console.log(anchor);
    var href = anchor.getAttribute("href");
    if (!href.startsWith("#")) {
    continue;
    @@ -21,7 +20,6 @@ window.addEventListener('load', function(event) {
    }

    var targetTop = target.getBoundingClientRect().top;
    console.log(target, targetTop);
    var currentTop = document.documentElement.scrollTop;
    var diff = Math.abs(targetTop - currentTop);
    scrollToElem(target, 100 + diff /4);
  7. hideya created this gist Sep 18, 2018.
    60 changes: 60 additions & 0 deletions smooth-scroll-anchors.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    // Automatically make all anchors to an ID'ed in-page element to smooth-scroll
    window.addEventListener('load', function(event) {
    var anchors = document.getElementsByTagName("a");
    for (var i = 0, max = anchors.length; i < max; i++) {
    var anchor = anchors[i];
    console.log(anchor);
    var href = anchor.getAttribute("href");
    if (!href.startsWith("#")) {
    continue;
    }
    anchor.addEventListener("click", function(e) {
    e.preventDefault();
    var href = this.getAttribute("href");
    var name = href.substring(1);
    var target = document.getElementById(name);
    if (!target) {
    target = document.getElementsByTagName("body")[0];
    }
    if (!target) {
    return;
    }

    var targetTop = target.getBoundingClientRect().top;
    console.log(target, targetTop);
    var currentTop = document.documentElement.scrollTop;
    var diff = Math.abs(targetTop - currentTop);
    scrollToElem(target, 100 + diff /4);
    });
    }
    });

    // based on https://gist.github.com/andjosh/6764939
    function scrollToElem(target, duration) {
    var start = window.pageYOffset;
    var to = target.getBoundingClientRect().top;
    var change = to - start;
    var currentTime = 0;
    var increment = 20;

    function animateScroll(){
    currentTime += increment;
    var val = easeInOutQuad(currentTime, start, change, duration);
    window.scrollTo(window.pageXOffset, val);
    if (currentTime < duration) {
    setTimeout(animateScroll, increment);
    }
    };
    animateScroll();

    //t = current time
    //b = start value
    //c = change in value
    //d = duration
    function easeInOutQuad(t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
    };
    }