0

さて、私は 1 つのページ (2 つの div) を取得しようとしています。主にスプラッシュ スクリーンです。「サイトに入る」をクリックすると、「メイン サイト」までスムーズにスクロールしますが、スムーズではなくジャンプします。要素までスクロールします。

このジャンプ効果なしでその要素にスムーズにスクロールするにはどうすればよいですか?

これが私のスニペットです：

splash = document.getElementById('intro');
content = document.getElementById('content');

function enterSite() {
  content.scrollIntoView({
    behaviour: "smooth"
  });
}
body {
  font-family: 'Archivo Narrow', sans-serif;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

html,
body {
  overflow: hidden;
}

main {
  width: 100%;
  height: 100%;
  position: relative;
}

#intro {
  background-image: url(https://i.imgsafe.org/51d0cf26df.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  text-align: center;
  height: 100%;
}

#splash {
  margin: auto;
  width: 40%;
  background-color: rgba(56, 56, 56, 0.4);
  border-radius: 50px 50px;
}

#splash-p {
  width: 70%;
  font-size: 1.2em;
  line-height: 1.5em;
  margin: auto;
  text-align: center;
  padding-top: 10px;
  color: #fff;
}

.btn {
  width: 35%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Main Content Page */

article {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
}
<div id="intro">
  <div id="splash">
    <p id="splash-p">Just a load of text repeated</p>
    <input
      type="image"
      src="Images/Button.png"
      class="btn"
      onclick="enterSite()"
    />
  </div>
</div>
<article id="content">Just a load of text repeated</article>

ボタンをクリックすると次の div にジャンプしますが、次の div にジャンプするのではなく、スムーズにスクロールする必要があります。

4

4 に答える 4

2

まっすぐジャンプしたくない場合は、何らかの方法でスクロールをアニメーション化する必要があります。
jQuery の助けを借りれば、次のように簡単です。

$("html, body").animate({ scrollTop: $([ELEMENT]).position().top }, 1000);

このフィドルを見てください: https://jsfiddle.net/8501ckvn/

jQueryは多くのクロス ブラウザーの問題を解決しますが、純粋な JavaScriptソリューションを探している場合は、Stackoverflow に既に多くの回答があります。

于 2016-10-05T15:55:04.007 に答える