42028
**最初に下記リンクをクリックすると**

```

    <a href="#hoge">リンク</a>
    
```

下記URLへ遷移する

> <http://example.com/#hoge>

* * *

**次に下記リンクをクリックすると画面上は最初の状態へ戻るのですが、**

```

    <a href="#">最初の状態へ戻る</a>
    
```

URLには#が付与される

> <http://example.com/#>

* * *

**下記リンクをクリックすると最初の状態へ戻る**

```

    <a href="">最初の状態へ戻る</a>
    
```

URLには#が付与されないが、画面は再度読み込まれる

> <http://example.com/>

* * *

**質問**  
・URLが下記の時、

> <http://example.com/#hoge>

・画面読み込まずに下記URLで最初のページ状態を表示する方法はあるでしょうか？

> <http://example.com/>
CC BY-SA 3.0
2018-02-24T14:02:44.277
41980
2018-02-27T12:52:06.543
2018-02-27T12:01:11.423
3054
7886
question
html html5
ページ内リンクで移動した後、#付与せず画面更新せず、元の状態へ遷移させたい
> ・画面読み込まずに下記URLで最初のページ状態を表示する方法はあるでしょうか？

「最初のページ状態」が何を初期化すれば良いか不明なのですが、html5のタグが付いているので、`window.scrollTo` と
`history.pushState`を使用した単純なサンプルを（ファイル名はtest.htmlとして書いてあります。また、イベントはインラインのonclickで単純に判りやすくしています。）

```

        function move0(){
    　　　　//ｘ：０　ｙ：０へ移動
            scrollTo( 0, 0 );
            //アドレスバーのURL変更（履歴の追加）
            history.pushState(null,null,"./test.html");
            return false;
        }
```

```

    <div style="height: 400px" id="1"><a href="#12">#12</a></div>
    <div style="height: 400px" id="2"><a href="#11">#11</a></div>
    <div style="height: 400px" id="3"><a href="#10">#10</a></div>
    <div style="height: 400px" id="4"><a href="#9">#9</a></div>
    <div style="height: 400px" id="5"><a href="#8">#8</a></div>
    <div style="height: 400px" id="6"><a href="#7">#7</a></div>
    <div style="height: 400px" id="7"><a href="#6">#6</a></div>
    <div style="height: 400px" id="8"><a href="#5">#5</a></div>
    <div style="height: 400px" id="9"><a href="#4">#4</a></div>
    <div style="height: 400px" id="10"><a href="#3">#3</a></div>
    <div style="height: 400px" id="11"><a href="#3">#2</a></div>
    <div style="height: 400px" id="12"><a href="javascript:void(0);" onclick="move0()"> 1 </a></div>
```
CC BY-SA 3.0
2018-02-27T05:04:38.143
42028
2018-02-27T12:52:06.543
2018-02-27T12:52:06.543
22793
22793
41980
answer