複数のアンカーにスムーズにスクロールアップ

私はWeb Devを初めて使用しています。サイドナビゲーションバーを使用して複数のアンカーにスクロールアップおよびスクロールできるウェブサイトを作りたいと思います。複数のアンカーにスムーズにスクロールアップ

これは私がこれだけのタグで作業してきたが、私はアンカーへのスムーズな移行/スクロール私は（サイドバーをクリックするたびにしたい私のhtmlコード、

<body> 
<div id="mySideDiv" class="divAnimate"> 
    <p id="head">HYUNJAE<br>WOO</p> 
    <div class="side"><a href="#home">HOME</a></div> 
    <div class="side"><a href="#portfolio">PORTFOLIO</a></div> 
    <div class="side"><a href="#contact">CONTACT</a></div> 
    <div class="side"><a href="#about">ABOUT</a></div> 
</div> 

<div class="mid-cont homePage" id="main"> 
    <article class="panel"><a id="home"></a> 
    <p> Welcome to My Website </p> 
    ... 
    </article> 

    <article class="panel"><a id="portfolio"></a> 
    <p> PORTFORLIO </p><br> 
    ... 
    </article> 

    <article class="panel"><a id="contact"></a> 
    <p> CONTACT </p><br> 
    ... 
</article> 

<article class="panel"><a id="about"></a> 
    <p> ABOUT </p><br> 
    ... 
</article>

です私のサイドバーは定位置に固定されています）。私はインターネットを検索し、jQueryやjavascriptを使用していくつかの回答を見つけましたが、彼らはトップツーボトムスクロールだったときにのみ働いていました。私はCONTACTからPORTFOLIOまで行くことを試みたときはいつでも、画面をHOMEとPORTFOLIOの間のどこかに置きます。私は答えが非常に明白になるように感じますが、なぜ私は理解できません...助けてください。

出典

2016-12-28 Hyunjae Woo

一つは、あなたの問題を解決することがあります質問/ 7717527 /スムーズスクロール - クリック - アンカーリンク - クリック –

このようなものhttp://stackoverflow.com/questions/34571656/difference-between-current-position-and-scrolled-position-with-jquery/34572021＃34572021 ?? –

を行う必要がありますthis答えをチェックしましたか？ HTMLコードは次のようになります。 https://css-tricks.com/snippets/jquery/smooth-scrolling/ http://stackoverflow.com/：これらのリンクの

<div class="side"><a href="#home" onclick="SmoothScroll()">HOME</a></div> 

function SmoothScroll() { 
    e.preventDefault(); 
    var target = $(this).attr("href"); 
    $('html, body').animate({ 
     scrollTop: $(""+target).offset().top 
    }, 2000);}

出典

2016-12-28 09:53:23

私の答えをチェックしましたか？ –

あなたはこのような機能のために、次のコードを使用することができます。

$(".same-page-links").on("click", function(e){ 
    e.preventDefault(); 
    var target = $(this).attr("href"); 
    if($(""+target).length) 
    { 
    var targetOffset = $(""+target).offset().top; 
    $("html, body").animate({"scrollTop": targetOffset}, 500); 
    } 
});//click

をここで、私はそのようなすべてのリンクがクラス「と同じページ・リンク」を持っていることを前提としています。このようなリンクをクリックすると、href属性または他の属性からターゲット要素のIDを取得できます。いったんそれを持っていれば、その要素のoffset().topを知り、jQuery animateメソッドを使ってそのオフセットまでスクロールするだけです。

もう1つ、空のa要素をターゲットIDを含むように作成する代わりに、それらのIDをそれらの記事自体に割り当てる必要があります。例えば代わりに

<article class="panel"><a id="about"></a>

のあなたはこの

<article id="about" class="panel">

出典

2016-12-28 09:47:56

複数のアンカーにスムーズにスクロールアップ

答えて

関連する問題