如何给网站添加一个自定义图片的 back to top 按钮

MAXMAX · 发表于 2018-4-12 12:24:41

本帖最后由 MAXMAX 于 2018-4-17 20:35 编辑

原版的样子：

修改后的样子：

shopify 官方教程地址：https://help.shopify.com/themes/ ... -back-to-top-button

Online Store > Themes.
Actions > Edit code.
点击 Snippets 文件夹.
点击Add a new snippet.
命名为 back-to-the-top.
复制以下内容到刚新建的文档中：记得替换https://cdn.shopify.com/your-image-url-btm.png为自己的图片地址

{% 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 = '15em' %}
<a href="#" title="Back to the top" class="back-to-top">
<style>
.back-to-top:before {
content: url(https://cdn.shopify.com/your-image-url-btm.png) !important;
}
.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;
display: none;
-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;
}
</style>
<script>
window.onload = function() {
jQuery(function($) {
var offset = {{vertical_offset_for_trigger}};
var duration = 500;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
}
else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
e.preventDefault();
$('html, body').animate( { scrollTop: 0 }, duration);
return false;
})
});
}
</script>