1. TOP
  2. web
  3. javascript
  4. vuejs
  5. URLに#値をつける

URLに#値をつける

|

Geronimo Labelの新サイトでも、現在位置を示す#値をURLに追加した。

https://www.hideyov.com/gernm/

$(document).on("click", ".scroll-btn", function () {
var destination = $(this).attr("href");
var target = $(destination == "#" || destination == "" ? 'html' : destination);$("html, body").animate({
scrollTop: $(destination).offset().top,
}, 300);

// targetに入っているジャンプ先オブジェクトのidを取得
var scrollTargetId = target.attr("id");// ハッシュをURLに追記

// アニメーションより先に変な動きを入れないため、0.3秒遅らせるsetTimeout(function() {
location.hash = scrollTargetId;
},300);

// 本来のクリックイベントは処理しない
return false;
});

ただし、現状では、どの言語を選択していても、ブラウザの再読込をすると、すべて日本語ページに戻ってしまう。
サイトの言語切り替え(日本語、英語、韓国語、中国語、スペイン語)は、Vue.js のv-ifディレクティブで実装しており、その選択をURLに反映するには、Vue Router をマスターしなければならず、まだ着手できていない。