質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

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

HTML

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

CSS

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

解決済

JavaScript ページのトップへ戻るボタンの実装について

arianp
arianp

総合スコア1

JavaScript

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

HTML

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

CSS

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

1回答

0評価

1クリップ

228閲覧

投稿2022/09/19 06:58

編集2022/09/20 17:13

前提

Webサイトの「トップページへ戻る」ボタンが効かなくて困っています。
どうやらJavaScriptのコードが誤っているようなのですが、どこが誤りなのかもしわかる方がいらっしゃいましたら、教えていただけますでしょうか?
当方HTML及びCSSは学びましたが、Javascriptに関しては初心者です。
もし足りない情報があれば追記させていただきますのでよろしくお願い致します。

実現したいこと

「トップページへ戻る」ボタンを動作するようにする

発生している問題・エラーメッセージ

ボタンは表示されるが、トップへ戻らない

該当のソースコード

HTML

<!DOCTYPE html> <html lang="ja"> <head prefix="og: https://ogp.me/ns#"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no,email=no,address=no"> <meta name="description" content="説明文"> <meta property="og:site_name" content="説明文"> <link href="./font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> <link rel="stylesheet" href="./css/style-smist.css"> <link rel="stylesheet" href="./css/lightbox/lightbox.min.css"> <script src="./js/jquery.js"></script> <script src="./js/func.js"></script> <script src="./js/smist2.js" type="text/javascript"></script> <script src="./js/lightbox/lightbox.min.js"></script> <title> タイトルです </title> </head> <body> <header> </header> <footer> <p class="pagetop"><a href="#wrapper">ページトップへ</a></p> </footer> </body> </html>

CSS

#wrapper { padding: 60px 0 0; } .pagetop { display: none; position: fixed; right: 15px; bottom: 15px; width: 35px; overflow: hidden; border-radius: 35px; -moz-border-radius: 35px; -webkit-border-radius: 35px; } .pagetop a { display: block; overflow: hidden; background: url('../img-mei/common/pagetop.svg') no-repeat center center; background-size: 16px 8px; background-color: rgba(0, 0, 0, 0.2); padding: 35px 0 0; height: 0 !important; }

JavaScript

var win_w; var win_h; var w_status; $(document).ready(function(){ win_w = $(window).width(); win_h = $(window).height(); if(win_w < 768){ w_status = 'sp'; } else { w_status = 'pc'; } setTimeout(function () { $('html').addClass('loading-delay'); }, 300); $('header').load('../inc/header.html', function( response, status, xhr ) { $('.sub b').on('click', function() { if($('.sub').hasClass('open')) { $('.sub').removeClass('open'); } else { $('.sub').addClass('open'); } return false; }); }); $('footer').load('../inc/footer.html', function( response, status, xhr ) { $('a[href^="#"]').on('click', function() { var Hash = $(this.hash); var HashOffset = $(Hash).offset().top; if(win_w < 768){ HashOffset = HashOffset - 60; } $("html,body").animate({ scrollTop: HashOffset }, 1000); return false; }); }); var ua = navigator.userAgent; if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) { $('.tel').each(function(){ var str = $(this).find('b').text(); $(this).find('b').html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>')); }); } var scrollpos; $(document).on('click', '.menu', function(){ win_h = $(window).height(); var gn_h = win_h - 60; if($('header').hasClass('active')) { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , scrollpos ); $('header').removeClass('active'); } else { scrollpos = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollpos}); $('header').addClass('active'); $('.gnavi_area').css('height', gn_h); } return false; }); }); $(window).on('load',function(){ pagetop(); }); var timer1 = null; $(window).on('orientationchange resize',function(){ if( timer1 == null ) { timer1 = setTimeout(function() { win_w = $(window).width(); win_h = $(window).height(); timer1 = null; }, 10); } }); var timer2 = null; $(window).on('scroll', function(){ if( timer2 == null ) { timer2 = setTimeout(function() { pagetop(); timer2 = null; }, 10); } }); function pagetop(){ var cpoint = 100; var element = $('.pagetop'); var visible = element.is(':visible'); if ($(window).scrollTop() > cpoint) { if( !visible ){ element.fadeIn(); } } else if( visible ){ element.fadeOut(); } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/09/19 07:07

HTMLも一部ではなく全て提示してください。 現時点では ・どこにJavaScript,CSSが書かれているのか ・書いたJavaScriptが動作できるような準備がされているのか 分かりません。
arianp

2022/09/19 07:23 編集

ご指摘ありがとうございます。情報が足りておらず申し訳ございません。 依頼されたものなので、どこまでこちらに載せていいのかわからないのですが、 こちらでわかりますでしょうか。 <!DOCTYPE html> <html lang="ja"> 省略 <script src="./js/func.js"></script> <body> <header> 省略 </header> <footer> <p class="pagetop"><a href="#wrapper">ページトップへ</a></p> </footer> </body> </html>
m.ts10806

2022/09/19 07:29

省略は極力ない方が。 せめて「現象が再現する最小構成のコード」を提示してもらえると。 多くは手元で動作確認するので、余計なものや下手に両者くされ過ぎたりすると 手元で再現できずにアドバイスできないことになるからです。 https://teratail.com/help/question-tips#questionTips35
arianp

2022/09/19 07:39

質問に不慣れで申し訳ありません。 詳しくありがとうございます。 こちらで大丈夫でしょうか? <!DOCTYPE html> <html lang="ja"> <head prefix="og: https://ogp.me/ns#"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no,email=no,address=no"> <meta name="description" content="説明文"> <meta property="og:site_name" content="説明文"> <link href="./font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> <link rel="stylesheet" href="./css/style-smist.css"> <link rel="stylesheet" href="./css/lightbox/lightbox.min.css"> <script src="./js/jquery.js"></script> <script src="./js/func.js"></script> <script src="./js/smist2.js" type="text/javascript"></script> <script src="./js/lightbox/lightbox.min.js"></script> <title> タイトルです </title> </head> <body> <header> </header> <footer> <p class="pagetop"><a href="#wrapper">ページトップへ</a></p> </footer> </body> </html>
m.ts10806

2022/09/19 07:48 編集

質問本文更新を。 ただ、JavaScriptのコードもそうですが、「ページのトップへ戻るボタン」関連以外のものも多いように見えます。 関連のものだけ添付されたほうが問題切り分けにもなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

HTML

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

CSS

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