アンカーリンクを押した際に、アコーディオンを開きたい。
1 <div class="inner"> 2 <div class="head01 head02"> 3 <div class="box"> 4 <div class="cont info-cont"> 5 <ul class="head-ul"> 6 <li class="head-text"><a href="#nya01">あああああ</a></li> 7 <li class="head-text"><a href="#nya02">いいいいい</a></li> 8 <li class="head-text"><a href="#nya03">ううううう</a></li> 9 </ul> 10 </div> 11 </div> 12 </div> 13 </div> 14 15 <section class="acc"> 16 <div id="nya01" class="
別ページから飛んできたときアコーディオンの指定の要素を開く - Elementor好きのWebデザイナー向けブログえれくり
タイトルのまんまですが別ページからアンカーで飛んできたときに、アコーディオンの指定の要素を開きたいときありますよね。ないですか？僕は仕事でありましたよ。とりあえず以下サンプルを見ていただければと思います。 Elementorでそんな機能は今のところないのでjQueryで作りました。 まず次のようにページを作成します。 Aページ（Bページへ飛ぶリンクボタン） Bページ（アコーディオンページ） Aページ <a href=”b.html#num1>1番目を開く</a> <a href=”b.html#num2>2番目を開く</a> <a href=”b.html#num3>3番目を開く</a> Bページ アコーディオンウィジェットを配置します。 そのウィジェットの下にHTMLウィジェットを入れます。 < script > //アコーディオンの場合 jQuery(function () { var
ヘッダ固定のサイトで、別ページへのアンカーリンクの位置 - usakorog
ネットで検索してみると、?id=とかをつけて......というのが多かったけど、普通の#でもいけるよね......？ というか、普通アンカーリンクって#でつけるから、#じゃないと使い勝手が悪い。 ヘッダ固定部分が120pxあるとした時に、リンク先のページに下記のコードを仕込んでおけばジャンプ後にヘッダ分動いてくれます。 $(window).on('load', function() { var url = $(location).attr('href'); if(url.indexOf("#") != -1){ var anchor = url.split("#"); var target = $('#' + anchor[anchor.length - 1]); if(target.length){ var pos = Math.floor(target.offset().top) -
外部ページへのアンカーリンクでヘッダー固定の場合、リンク先がずれるのを防ぐ | Code Pocket
外部ページへのアンカーリンクでヘッダー固定の場合、リンク先がずれるのを防ぐ 2016/4/1 2016/4/2 JavaScript JSのコード このコードをリンク先のファイルへ貼り付けて下さい。 WordPressなどでヘッダーを共有している場合は、ヘッダーに入れて下さい。 $(window).on('load', function() { var headerHeight = 84; var url = $(location).attr('href'); if(url.indexOf("?id=") != -1){ var id = url.split("?id="); var $target = $('#' + id[id.length - 1]); if($target.length){ var pos = $target.offset().top-headerHeight; $
ヘッダー上部固定でアンカーリンクがずれるのを解消する - CodingMania
aタグに指定のclassが追加されている場合にだけ、同ページ内アンカーリンク、別ページアンカーリンクを指定した高さ分ずらして表示します。 ページ内リンクはaタグにclass="anchorlink"を指定。（これを指定しなかったら動きません） 例）<a class="anchorlink" href="#area01">エリア01</a> 別ページにのアンカー位置にリンクを張りたい場合は、通常の書き方OK! 【2018/10/05改定】 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
g.o.a.t - 縦書き可能なブログサービス
bootstrap の固定ナビゲーションとページ内アンカー問題 : sonots:blog