scrollIntoViewによるスムーススクロール効果 - Javascript

Question

これは、1つのページ（2つのdiv）、主にスプラッシュ画面を取得しようとしています。「サイトを入力」をクリックするとスムーズに「メインサイト」にスクロールします。しかし、要素へのスムーズなスクロールではなく、ジャンプします。

このジャンプ効果なしでスムーズにスクロールするにはどうすればよいですか？あなたがボタンをクリックすると、それは次のdivにジャンプしますが、私はそれがスムーズにスクロールするのではなく、次のdivにジャンプする必要が

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

 
function enterSite(){ 
 
\t 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"> 
 
\t \t \t <div id="splash"> 
 

 
\t \t \t <p id="splash-p">Just a load of text repeated</p> 
 

 
\t \t \t <input type="image" src="Images/Button.png" class="btn" onclick="enterSite()"> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <article id="content"> 
 
\t \t \t 
 
\t \t \t Just a load of text repeated 
 

 
\t \t </article>

：ここ

は私の抜粋です、純粋なjavascriptを使用して、私が見た他のどこにでもプラグインがあるか、またはjqueryを使用しているようです。

Answer 1

を働いていた場合、私に教えてください作ることができます何とかスクロールする。 jQueryのの助けを借りて
はそのように簡単です：このフィドルで

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

ルック：https://jsfiddle.net/8501ckvn/

---

jQueryのは、クロスブラウザの問題の多くを解決していますが、純粋なを探している場合javascript解決方法Stackoverflowには既に多くの回答があります。つまり、Smooth scroll anchor links WITHOUT jQueryを見てください。

Answer 2

あなたはJQueryも持っていると仮定します。

あなたはスムーズスクロール効果を得るために、次のjQueryコードの使用

function enterSite(){ 
    $('html, body').stop().animate({ 
     scrollTop: $('#content').offset().top 
    }, 1500); 
}); 

が、それはあなたがまっすぐにジャンプをしたくない場合は、アニメーション化する必要があり