\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\t

\"テストページ\"

\r\n\t\t
\r\n\t
\r\n
\r\n\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\t

メイン画像見出

\r\n\t\t\t

メイン画像テキスト

\r\n\t\t
\r\n\t
\r\n\t
\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t

ボックスA

\r\n\t\t\t\t\t\t

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

\r\n\t\t\t\t\t\t

テキスト

\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t

ボックスB

\r\n\t\t\t\t\t\t

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

\r\n\t\t\t\t\t\t

テキスト

\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t

ボックスC

\r\n\t\t\t\t\t\t

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

\r\n\t\t\t\t\t\t

テキスト

\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t

ボックスD

\r\n\t\t\t\t\t\t

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

\r\n\t\t\t\t\t\t

テキスト

\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\t
\r\n
\r\n\r\n\r\n\r\n/////test.js/////\r\nvar up_timer;\r\n \r\nfunction getPosition(){\r\n\thorizontal = document.body.scrollLeft || document.documentElement.scrollLeft;\r\n\tvertical = document.body.scrollTop || document.documentElement.scrollTop;\r\n}\r\n \r\nfunction pageup(x,y){\r\n\tif (up_timer) {\r\n\t\tclearTimeout(up_timer);\r\n\t}\r\n\tif (y >= 1) {\r\n\t\tgetPosition();\r\n\t\tvar divisionY = (vertical-(vertical/7));\r\n\t\tvar Y = Math.floor(divisionY);\r\n\t\twindow.scrollTo(horizontal,Y);\r\n\t\tup_timer = setTimeout(\"pageup(\"+horizontal+\",\"+Y+\")\",10);\r\n\t} else {\r\n\t\twindow.scrollTo(horizontal,0);\r\n\t\tclearTimeout(up_timer);\r\n\t}\r\n}\r\n \r\nfunction scrollup(){\r\n\tgetPosition();\r\n\tpageup(horizontal,vertical);\r\n}\r\n\r\n###補足情報\r\n
  • test1へ
  • \r\nの部分の[onclick=\"scrollup(); return false;\"]を削除するとページ内リンクはそのまま利用できます(当然だとは思いますが・・・)\r\n\r\nご助力いただければと思います。\r\n宜しくお願いします。","answerCount":1,"upvoteCount":0,"datePublished":"2015-10-14T03:54:31.985Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"参考にされているサイトがでたらめです。\r\n\r\ndemoのあるサイトを参考にされたほうが良いかと思います。\r\nhttp://memocarilog.info/jquery/7236","dateModified":"2015-10-17T02:20:47.797Z","datePublished":"2015-10-17T02:20:47.797Z","upvoteCount":0,"url":"https://teratail.com/questions/17823#reply-28033","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/17823","name":"fullpage.jsを用いてるページでのフッターナビでのページ内リンク"}}]}}}
    質問するログイン新規登録

    Q&A

    1回答

    6858閲覧

    fullpage.jsを用いてるページでのフッターナビでのページ内リンク

    takeaduma

    総合スコア44

    JavaScript

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

    HTML

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

    CSS

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

    0グッド

    0クリップ

    投稿2015/10/14 03:54

    0

    0

    ###前提・実現したいこと
    お世話になっております、表題のとおりではございますが、
    fullpage.jsを用いてページを作成しております。
    ページとしましては、
    ① まず画面一面に背景に指定した画像とテキストが表示されます。
    ② ①の画面から下へスクロールすると、そのページのコンテンツ(内容A、内容B、内容C)が表示されます。
    ※fullpage.jsを用いているのは①から下へ移動するときのみで、それ以降は通常のスクロールになっております。
    ③ 画面最下部にフッターナビを固定で表示しており、そのナビには(内容A、内容B、内容C)といったページ内リンク用の項目があります。
    フッターナビを押されると、ページ内リンクでぬるぬるっとその内容のところまで移動するようにしたいです。
    また、コンテンツ画面の最上部まで来たときに上へスクロールすると①の画面に戻るようにしたいです。

    ###発生している問題・エラーメッセージ
    fullpage.jsと
    http://weback.net/javascript/1022/のサイトを参考に作成したページ内リンク用スムーススクロールjavascriptをインクルードすると
    干渉をしてしまっているのかページ内リンクが効かない。

    ###ソースコード

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>タイトルタイトル</title> <link rel="stylesheet" href="css/init.css"> <link rel="stylesheet" href="css/jquery.fullPage.css"> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="js/css3-mediaqueries.js"></script> <![endif]--> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.easings.min.js"></script> <script src="js/jquery.slimscroll.min.js"></script> <!--ページ内リンクのスムーススクロールのために作成したjs(コード別途記述)--> <script src="js/test.js"></script> <script src="js/jquery.fullPage.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ scrollOverflow: true, css3: false }); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#next").click(function () { $.fn.fullpage.moveTo(2); }); }); </script> </head> <body id="temp01"> <header> <div class="wrapper01"> <div class="wrapper02"> <h1 class="logo"><a href=""><img src="images/logo.png" alt="テストページ"></a></h1> </div> </div> </header> <footer> <div class="wrapper01 footernavi02"> <div class="wrapper02"> <ul> <li><a onclick="scrollup(); return false;" href="#test1"><span>test1へ</span></a></li> <li><a onclick="scrollup(); return false;" href="#test2"><span>test2へ</span></a></li> <li><a onclick="scrollup(); return false;" href="#test3"><span>test3へ</span></a></li> <li><a onclick="scrollup(); return false;" href="#test4"><span>test4へ</span></a></li> </ul> </div> </div> </footer> <div id="fullpage"> <div class="section mainimg"> <div class="slide"> <h1>メイン画像見出</h1> <p>メイン画像テキスト<br> <br> </p> </div> </div> <div class="section section01"> <div class="wrapper01"> <div class="wrapper02"> <div class="wrapper03"> <div id="test1" class="wrapper04 box_a"> <h2>ボックスA</h2> <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> <p class="c_note">テキスト</p> </div> <div id="test2" class="wrapper04 box_b"> <h2>ボックスB</h2> <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> <p class="c_note">テキスト</p> </div> <div id="test3" class="wrapper04 box_c"> <h2>ボックスC</h2> <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> <p class="c_note">テキスト</p> </div> <div id="test4" class="wrapper04 box_d"> <h2>ボックスD</h2> <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> <p class="c_note">テキスト</p> </div> </div> </div> </div> </div> </div> </body> </html>

    /////test.js/////
    var up_timer;

    function getPosition(){
    horizontal = document.body.scrollLeft || document.documentElement.scrollLeft;
    vertical = document.body.scrollTop || document.documentElement.scrollTop;
    }

    function pageup(x,y){
    if (up_timer) {
    clearTimeout(up_timer);
    }
    if (y >= 1) {
    getPosition();
    var divisionY = (vertical-(vertical/7));
    var Y = Math.floor(divisionY);
    window.scrollTo(horizontal,Y);
    up_timer = setTimeout("pageup("+horizontal+","+Y+")",10);
    } else {
    window.scrollTo(horizontal,0);
    clearTimeout(up_timer);
    }
    }

    function scrollup(){
    getPosition();
    pageup(horizontal,vertical);
    }

    ###補足情報

    <li><a onclick="scrollup(); return false;" href="#test1"><span>test1へ</span></a></li> の部分の[onclick="scrollup(); return false;"]を削除するとページ内リンクはそのまま利用できます(当然だとは思いますが・・・)

    ご助力いただければと思います。
    宜しくお願いします。

    気になる質問をクリップする

    クリップした質問は、後からいつでもMYページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    バッドをするには、ログインかつ

    こちらの条件を満たす必要があります。

    guest

    回答1

    0

    参考にされているサイトがでたらめです。

    demoのあるサイトを参考にされたほうが良いかと思います。
    http://memocarilog.info/jquery/7236

    投稿2015/10/17 02:20

    TetsujiMiwa

    総合スコア1124

    バッドをするには、ログインかつ

    こちらの条件を満たす必要があります。

    あなたの回答

    tips

    太字

    斜体

    打ち消し線

    見出し

    引用テキストの挿入

    コードの挿入

    リンクの挿入

    リストの挿入

    番号リストの挿入

    表の挿入

    水平線の挿入

    プレビュー

    まだベストアンサーが選ばれていません

    会員登録して回答してみよう

    アカウントをお持ちの方は

    15分調べてもわからないことは
    teratailで質問しよう!

    ただいまの回答率
    85.29%

    質問をまとめることで
    思考を整理して素早く解決

    テンプレート機能で
    簡単に質問をまとめる

    質問する

    関連した質問