긴 페이지에서 맨 위로 버튼 추가

페이지가 길고 스크롤을 많이 해야 하는 경우 테마에 맨 위로 버튼을 추가할 수 있습니다.

맨 위로 예

맨 위로 코드 조각 생성

  1. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  2. 코드 조각 back-to-the-top의 이름을 지정하고 코드 조각 생성을 클릭합니다. 코드 조각 파일이 코드 편집기에서 열립니다.

  3. 새로 생성된 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' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>
  1. 저장을 클릭합니다.

코드 조각 포함

  1. 레이아웃 폴더에서 theme.liquid 파일을 엽니다.

  2. 파일 맨 아래로 스크롤합니다. 닫는 </body> 태그 바로 위쪽에 이 코드를 붙여넣습니다.

{% render 'back-to-the-top' %}
Your code should look like this:

![Back to top include snippet](/manual/customize/back-to-top-include-snippet.png)]
  1. 저장을 클릭합니다.

맨 위로 버튼 구성(선택 사항)

맨 위로 버튼을 사용자 지정하려면 여기를 클릭하고 코드 조각의 첫 행을 확인합니다.

  • 브라우저 하단을 기준으로 버튼 위치를 변경하려면 position_from_bottom 값을 편집합니다.
{% assign position_from_bottom = '4em' %}
  • 버튼이 표시되기 전에 고객이 스크롤해야 하는 범위를 변경하려면 vertical_offset_for_trigger 값을 편집합니다.
{% assign vertical_offset_for_trigger = 300 %}

데모 스토어

데모 스토어를 방문하여 이러한 사용자 지정의 예를 확인할 수 있습니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험