LoginSignup
@satico (乃木 さちこ)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

別ページのページ内リンクに遷移した際に、URLにアンカーリンクを残さない方法

Q&A

JavaScriptHTML5jQuery

解決したいこと

ページ内リンクのアンカー(#)をURLにアンカーリンクが残らないようにしたいのですが、ページ遷移がなければ、何とか出来たのですが、別ページから遷移するページ内リンクの場合の方法がわかりません…。
ソースは以下になります。

document.addEventListener('touchstart', function() {}, {passive: true});
$(function(){
    $('a[href^=#]').click(function(){
    var href= $(this).attr("href");
    if(href.indexOf("#") >= 0 && href != '' && href != "#"){
      var target = $(href);
          try{
            position = target.offset().top;
          }catch(e){
      }
    }
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var speed = Math.ceil(Math.pow(Math.abs((position - scrollY)), 0.7));
    if(speed){
      $('body, html').animate({scrollTop:position}, speed, 'swing');
    }
        return false;
    });
});

URLが残ってしまうリンクは以下ですが、

<a href="index.php#access">アクセス</a>

クリックしても、プログラムの０「var href= 」に「index.php#access」が入ってなさそうです。ページ内リンクだと「#news」等、アンカーリンクから後が反映するのですが、、、

urlHashとか、location.pathname などを使うのかと何となくは思っているのですが、以前教えて頂いた以下の一文をいれてもダメそうです、、、

history.replaceState(null, '', location.pathname);

よろしくお願いいたします。

1 likes

2Answer

yoshi389111
@yoshi389111

画面表示時に location.href を書き換えたらいかがでしょうか？

$(document).ready(function(){
  var index = location.href.indexOf('#');
  if (0 <= index) {
    location.href = location.href.substring(0, index);
  }
});

当然、一瞬は見えてしまいますが、すぐに消えるかと思います。

0Like

Comments

  1. @satico

    Questioner

    すみません、こちらは、プログラムの中の、どの部分に入れたらよいでしょうか？？

    一番最初や、.click(function()の中など、いろいろ試してみたのですが

    #は表示されなくなくなったものの、リンク先に飛ばなかったり、

    「href」が「index.php#access」から「#access」になれば正しいのかと思いますが、変わってなかったり、

    position = target.offset().top;

    の「target」が「undifined」になっていたりします、、、

  2. @yoshi389111

    $(function(){ ... } の外（当然スクリプトの書ける場所）であれば、どこでも大丈夫だろうと思います。

    試したときには document.addEventListener の行の直前あたりにいれてみました。

    （「一番最初」というのと同じだと思います）

    $(document).ready() というのは、画面表示が終わったときに jquery に呼ばれるので、その時点で location.href をチェックして、# が付いていればそれ以降を削除しているだけです。

    「href」を「index.php#access」から「index.php」にするのだと思っていますが、それが違いますか？

  3. @satico

    Questioner

    回答ありがとうございます。

    最初に書くと、確かにURLに#accessは表示されないのですが、ページ内リンクに移動することが出来ず、もう一度クリックすれば移動できますが、そうすると#accessが表示されてしまいます。。。
satico
@satico

引き続きいろいろ試して、URLに#accessはつかなくなったのですが、ページをまたいでのページ内リンクへの移動が出来ません…。。。。ページ間の移動がなければページ内での移動は出来るのですが…。。。

ページの移動がない場合（#news)とページの移動がある場合（index#access)を比較すると、position　の値が取れてないような感じがします。

先に教えていただいたように、index#access　を#access に書き替えれば出来そうな気はするのですが、その方法が、調べてもわかりません…。。。

関係ないですが、.htaccessで拡張子が表示されないようにしています。。。。

cap.JPG

0Like

Your answer might help someone💌

LoginSign Up