70

スムーズスクロールを使用してリンクを固定することはできます jQueryか? 新しいサイトを作成していますが、 を使用したくありませんjQuery。

4

17 に答える 17

60

この回答の拡張: https://stackoverflow.com/a/8918062/3851798

scrollTo の関数を定義した後、scrollTo する要素を関数に渡すことができます。

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

id="footer" の div がある場合

<div id="footer" class="categories">…&lt;/div>

スクロールするために実行するスクリプトでは、これを実行できます。

elmnt = document.getElementById("footer");
scrollTo(document.body, elmnt.offsetTop, 600);

そして、あなたはそれを持っています。jQueryなしでスムーズにスクロール。実際にブラウザのコンソールでそのコードをいじって、好みに合わせて微調整することができます。

于 2015-08-13T11:45:58.470 に答える
48

here: JavaScript animationの関数を使用し、それを変更してプロパティ (スタイルのプロパティだけでなく) を変更するには、次のようなことを試すことができます。

デモ: http://jsfiddle.net/7TAa2/1/

ただ言って...

function animate(elem, style, unit, from, to, time, prop) {
  if (!elem) {
    return;
  }
  var start = new Date().getTime(),
    timer = setInterval(function() {
      var step = Math.min(1, (new Date().getTime() - start) / time);
      if (prop) {
        elem[style] = (from + step * (to - from)) + unit;
      } else {
        elem.style[style] = (from + step * (to - from)) + unit;
      }
      if (step === 1) {
        clearInterval(timer);
      }
    }, 25);
  if (prop) {
    elem[style] = from + unit;
  } else {
    elem.style[style] = from + unit;
  }
}

window.onload = function() {
  var target = document.getElementById("div5");
  animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};
div {
  height: 50px;
}
<div id="div1">asdf1</div>
<div id="div2">asdf2</div>
<div id="div3">asdf3</div>
<div id="div4">asdf4</div>
<div id="div5">asdf5</div>
<div id="div6">asdf6</div>
<div id="div7">asdf7</div>
<div id="div8">asdf8</div>
<div id="div9">asdf9</div>
<div id="div10">asdf10</div>
<div id="div10">asdf11</div>
<div id="div10">asdf12</div>
<div id="div10">asdf13</div>
<div id="div10">asdf14</div>
<div id="div10">asdf15</div>
<div id="div10">asdf16</div>
<div id="div10">asdf17</div>
<div id="div10">asdf18</div>
<div id="div10">asdf19</div>
<div id="div10">asdf20</div>

于 2013-07-18T20:31:48.307 に答える
44

実際には、より軽量で簡単な方法があります: https://codepen.io/ugg0t/pen/mqBBBY

function scrollTo(element) {
  window.scroll({
    behavior: 'smooth',
    left: 0,
    top: element.offsetTop
  });
}

document.getElementById("button").addEventListener('click', () => {
  scrollTo(document.getElementById("8"));
});
div {
  width: 100%;
  height: 200px;
  background-color: black;
}

div:nth-child(odd) {
  background-color: white;
}

button {
  position: absolute;
  left: 10px;
  top: 10px;
}
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<button id="button">Button</button>

于 2017-11-16T05:03:29.743 に答える
4

セレクターを使用した CSS3 トランジションは、:targetJS のハッキングなしで素晴らしい結果をもたらすことができます。私はこれを実装するかどうかを考えていましたが、Jquery がないと少し面倒です。詳細については、この質問を参照してください。

于 2014-04-30T14:59:09.260 に答える
4

これはかなり古い質問ですが、最近はスムーズなスクロールが CSS でサポートされているため、スクリプトは必要ないと言うことが重要だと思います。

html {
  scroll-behavior: smooth;
}

このプロパティは、2019 年の時点で Safari または IE/Edge をまだサポートしていないため、クロスブラウザーを完全にサポートするには、引き続きスクリプトを使用する必要があります。

于 2019-12-09T14:19:48.137 に答える
4

ここでこのコードを試してください：

window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
    });
于 2019-05-10T16:12:43.420 に答える
1

@Ian からのアップグレード版です

// Animated scroll with pure JS
// duration constant in ms
const animationDuration = 600;
// scrollable layout
const layout = document.querySelector('main');
const fps = 12;  // in ms per scroll step, less value - smoother animation
function scrollAnimate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            var value =  (from + step * (to - from)) + unit;
            if (prop) {
                elem[style] = value;
            } else {
                elem.style[style] = value;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, fps);
    if (prop) {
        elem[style] = from + unit;
    } else {
        elem.style[style] = from + unit;
    }
}

function scrollTo(hash) {
    const target = document.getElementById(hash);
    const from = window.location.hash.substring(1) || 'start';
    const offsetFrom = document.getElementById(from).offsetTop;
    const offsetTo = target.offsetTop;
    scrollAnimate(layout,
        "scrollTop", "", offsetFrom, offsetTo, animationDuration, true);
    setTimeout(function () {
      window.location.hash = hash;
    }, animationDuration+25)
};

// add scroll when click on menu items 
var menu_items = document.querySelectorAll('a.mdl-navigation__link');
menu_items.forEach(function (elem) {
    elem.addEventListener("click",
        function (e) {
            e.preventDefault();
            scrollTo(elem.getAttribute('href').substring(1));
        });
});

// scroll when open link with anchor 
window.onload = function () {
    if (window.location.hash) {
        var target = document.getElementById(window.location.hash.substring(1));
        scrollAnimate(layout, "scrollTop", "", 0, target.offsetTop, animationDuration, true);
    }
}
于 2019-02-20T00:16:02.173 に答える