Thêm nút Quay lại đầu trang trên các trang dài
Trang này được in vào Mar 28, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top.
Cẩn trọng
Chủ đề cổ điển không có trong Cửa hàng chủ đề. Những chủ đề này không có các tính năng thuộc Chủ đề Online Store 2.0 của Shopify, và chủ đề Cổ điển miễn phí của Shopify sẽ không nhận được bản cập nhật ngoài bản sửa lỗi bảo mật.
Nếu có trang dài và yêu cầu cuộn nhiều, bạn có thể thêm nút Quay lại đầu trang vào chủ đề.
Tạo đoạn mã quay lại đầu trang
Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề .
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã .
Trong thư mục Đoạn mã , nhấp vào Thêm đoạn mã mới .
Đặt tên cho đoạn mã back-to-the-top
, sau đó nhấp vào Tạo đoạn mã . Tệp đoạn mã sẽ mở trong trình chỉnh sửa mã.
Dán mã sau vào tệp back-to-the-top
mới tạo:
{% 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Nhấp vào Save (Lưu).
Trong ứng dụng Shopify , chạm vào nút … .
Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến .
Nhấn vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã .
Trong thư mục Đoạn mã , nhấp vào Thêm đoạn mã mới .
Đặt tên cho đoạn mã back-to-the-top
, sau đó nhấp vào Tạo đoạn mã . Tệp đoạn mã sẽ mở trong trình chỉnh sửa mã.
Dán mã sau vào tệp back-to-the-top
mới tạo:
{% 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Nhấp vào Save (Lưu).
Trong ứng dụng Shopify , chạm vào nút … .
Trong phần Sales channels (Kênh bán hàng), nhấn vào Cửa hàng trực tuyến .
Nhấn vào Manage themes (Quản lý chủ đề).
Tìm chủ đề bạn muốn chỉnh sửa, nhấp vào nút ... để mở menu thao tác, sau đó nhấp vào Chỉnh sửa mã .
Trong thư mục Đoạn mã , nhấp vào Thêm đoạn mã mới .
Đặt tên cho đoạn mã back-to-the-top
, sau đó nhấp vào Tạo đoạn mã . Tệp đoạn mã sẽ mở trong trình chỉnh sửa mã.
Dán mã sau vào tệp back-to-the-top
mới tạo:
{% 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Nhấp vào Save (Lưu).
Thêm đoạn mã
Trong thư mục Bố cục , mở tệp theme.liquid
.
Cuộn đến cuối tệp. Dán mã này ngay phía trên thẻ có kết thúc là </body>
:
{% render 'back-to-the-top' %}
Mã của bạn sẽ có dạng như sau:
Nhấp vào Save (Lưu).
Định cấu hình nút quay lại đầu trang (không bắt buộc) Để tùy chỉnh nút quay lại đầu trang, nhấp vào đây và xem những dòng đầu tiên của đoạn mã.
Để thay đổi vị trí nút cân đối với phía cuối của trình duyệt, hãy chỉnh sửa giá trị position_from_bottom
:
{% assign position_from_bottom = '4em' %}
Để thay đổi khoảng cách mà khách hàng cần cuộn xuống trước khi thấy nút, hãy chỉnh sửa giá trị vertical_offset_for_trigger
:
{% assign vertical_offset_for_trigger = 300 %}
Cửa hàng demo Truy cập cửa hàng demo để xem ví dụ về tùy chỉnh này.