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

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

新規登録して質問してみよう
ただいま回答率
85.48%
HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

JavaScript

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

HTML

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

Q&A

解決済

1回答

1696閲覧

別ページからのアンカーリンク時、ヘッダーが上に埋まってしまいます。

oda-r

総合スコア1

HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2021/03/28 12:58

index.html内のアンカーリンクはスムーズにスクロールしますが、
他のページからindex.html内のアンカーリンクに飛ぼうとしたら、
何故かヘッダーが上に隠れてしまいます。
色々つけ外ししたり、他サイト様を参考にしましたが全然分かりません。
詳しい方、教えて頂けないでしょうか。

<a href="http://sample.com/index.html#aaa"> index.html内は大丈夫 <a href="http://sample.com/bbb.html"> からhttp://sample.com/index.html#aaaに飛ぶと埋まる

ちなみにindex.html自体に飛んでも埋まりません。
あくまでアンカーリンクが付いた時のみのようです。
埋まった時にheader全体にpadding-topで適当に数値を打ってみるとヘッダーが出ます。

色々jsを入れてるのが原因なのでしょうか。

使っているもの

var scrollpos; $('#menu_active, #menu_nav').on('click', function(){ $('body').toggleClass('open'); if(state == false) { scrollpos = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollpos}); state = true; } else { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , scrollpos ); state = false; } }); new function(){ var attr ="data-tor-smoothScroll"; var attrPatt = /noSmooth/; var d = document; function addEvent(elm,listener,fn){ try{ // IE elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent( "on"+listener ,function(){ fn.apply(elm,arguments) } ); } } addEvent(window,"load",function(){ var anchors = d.getElementsByTagName("a"); for(var i = 0 ,len=anchors.length; i<len ; i++){ if(!attrPatt.test(anchors[i].getAttribute(attr)) && anchors[i].href.replace(/\#[a-zA-Z0-9_]+/,"") == location.href.replace(/\#[a-zA-Z0-9_]+/,"")){ anchors[i].rel = anchors[i].href; //anchors[i].href = "javascript:void(0)"; anchors[i].onclick=function(){SmoothScroll(this)} } } }); }
$(document).on('click', 'a[href*="#"]', function() { let time = 400; let target = $(this.hash); if (!target.length) return; let targetY = target.offset().top - $('#sp-menu').height(); $('html,body').animate({scrollTop: targetY}, time, 'swing'); return false; });
var navPos = jQuery( '#sp-menu' ).offset().top; // グローバルメニューの位置 var navHeight = jQuery( '#sp-menu' ).outerHeight(); // グローバルメニューの高さ jQuery( window ).on( 'scroll', function() { if ( jQuery( this ).scrollTop() > navPos ) { jQuery( 'body' ).css( 'padding-top', navHeight ); jQuery( '#sp-menu' ).addClass( 's_fixed' ); } else { jQuery( 'body' ).css( 'padding-top', 0 ); jQuery( '#sp-menu' ).removeClass( 's_fixed' ); } });

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

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

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

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

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

guest

回答1

0

自己解決

灯台下暗しでした。
全体に掛けていた

wrap:overflow hidden;

が邪魔していました。

bodybidy:overflow-x hidden;

で解決しました。

投稿2021/04/01 22:39

oda-r

総合スコア1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問