トップに戻るボタンが表示されない

日本語 ディスカッション 技術的なQ＆A
, ,
1

テーマ：Rise 15.3.0

一定のところまでスクロールすると、トップに飛んでくれるボタンを以下の手順で追加しました。

①snippetsに「back-to-the-top」ファイルを追加

②追加したファイルに下記コードを張り付けて保存

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

  Back to the top 

{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}

③theme.liquidのの直前に、 {% render ‘back-to-the-top’ %}を追加

上記の手順だとサイト上にボタンが出現しません。

ただし、Dawn 15.2ですとボタンは出現して問題なく作動しています。

何か原因がわかる方がいらっしゃいましたらご教示いただけますと幸いです。

2

@uf2 様

TOPへ戻るボタンが表示されない件ですが、記載いただいていたコードのJavaScript部分で「>」「<」「'」がそれぞれUnicode化されてしまっているため、JavaScriptが正常に動いていなことが原因だと思われます。

back-to-the-topのコードを下記に変更いただければ、表示されるかと思われます。

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

  Back to the top 

{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}

ご参考まで。

（キュー小坂）