|
本帖最后由 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>
复制代码
- 点击保存
- 找到Layouts 文件夹, 打开 theme.liquid.
- 复制{% include 'back-to-the-top' %} 粘贴到</body> tag前面
- 点击保存。
如果你不喜欢有背景, 将background-color: #eee; 修改为background-color: transparent;
{% assign position_from_bottom = '4em' %} 修改4em的大小调整按钮离底部的距离, 数字越大按钮越高。
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
|