jquery - 添加“返回顶部按钮”
问题描述
我在 Shopify 做一个项目,基本上是做一个卖手表的网站。实际上,我在这里和那里很容易解决了几个问题,但我遇到的问题是当我必须在多个地方添加一些代码时。在我的 theme.liquid 中,我加载了我的 .css 和 .js 文件,这样我就可以轻松地在这两个文件中做一些事情,并且“魔法”发生在我的网站上。问题是,例如,如果我想添加一个返回顶部按钮,我知道我需要在我的 .js 文件中编写的函数,但我不知道在哪里放置我需要的 HTML 和 CSS 部分我的 theme.liquid 文件。据我所知,在这种特定情况下,我需要直接在我的主文件中编写 CSS 和 HTML 位,同时在我的 .js 文件中定义实际函数。
<html class="no-js" lang="{{ shop.locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_button }}">
<link rel="canonical" href="{{ canonical_url }}">
{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}
{%- capture seo_title -%}
{%- if request.page_type == 'search' and search.performed == true -%}
{{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
{%- else -%}
{{ page_title }}
{%- endif -%}
{%- if current_tags -%}
{%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}
<title>{{ seo_title | strip }}</title>
{%- if page_description -%}
<meta name="description" content="{{ page_description | escape }}">
{%- endif -%}
{% include 'social-meta-tags' %}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
<script>
var theme = {
breakpoints: {
medium: 750,
large: 990,
widescreen: 1400
},
strings: {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
regularPrice: {{ 'products.product.regular_price' | t | json }},
salePrice: {{
'products.product.sale_price' | t | json }},
sale: {{ 'products.product.on_sale' | t | json }},
showMore: {{ 'general.filters.show_more' | t | json }},
showLess: {{ 'general.filters.show_less' | t | json }},
addressError: {{ 'sections.map.address_error' | t | json }},
addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
authError: {{ 'sections.map.auth_error_html' | t | json }},
newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
external: {{ 'general.accessibility.link_messages.external' | t | json }},
newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
update: {{ 'cart.label.update' | t | json }},
quantity: {{ 'cart.label.quantity' | t | json }},
discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
regularTotal: {{ 'cart.label.regular_total' | t | json }},
priceColumn: {{ 'cart.label.price_column' | t | json }},
quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
cartError: {{ 'cart.general.cart_error' | t | json }},
removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }}
},
moneyFormat: {{ shop.money_format | json }},
moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }}
}
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
{%- if request.page_type contains 'customers/' -%}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{%- endif -%}
<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
{{ content_for_header }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
{{'johndoe.css' | asset_url | stylesheet_tag }}
<script>
window.mlvedaShopCurrency = "{{ shop.currency }}";
window.shopCurrency = "{{ shop.currency }}";
window.supported_currencies = "{{ settings.mlvedaACS_supportedCurrencies }}";
</script></head>
<body class="template-{{ request.page_type | handle }}">
<a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>
<div id="SearchDrawer" class="search-bar drawer drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}">
<div class="search-bar__table">
<div class="search-bar__table-cell search-bar__form-wrapper">
<form class="search search-bar__form" action="{{ routes.search_url }}" method="get" role="search">
<input class="search__input search-bar__input" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
<button class="search-bar__submit search__submit btn--link" type="submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
</div>
<div class="search-bar__table-cell text-right">
<button type="button" class="btn--link search-bar__close js-drawer-close">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
</button>
</div>
</div>
</div>
{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}
{% section 'header' %}
<div class="page-container" id="PageContainer">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<div id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'sections.slideshow.navigation_instructions' | t -}}
</div>
</div>
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
</ul>
{{'johndoe.js' | asset_url | script_tag}}
{% include 'mlveda-currencies-switcher' %}{% include 'mlveda-currencies' %}{% include 'mlveda-flag' %}{% include 'mlveda-currencies-style' %}
{% include 'swymSnippet' %}
{% include 'gtranslate', float: 'yes' %}
</body>
</html>
我知道浏览该代码有点烦人,但是任何人都可以帮助我解释我需要将 CSS 和 HTML 部分放在哪里,以便我的按钮确实出现在我的网站上吗?
解决方案
我不确定我是否理解你的问题。如果您需要一个简单的按钮来返回页面顶部,那么您可以轻松地在 HTML 代码底部的某个位置放置一个链接。
<a href="#top">back to top</a>
也许您需要创建一个 ID 为“top”的 anker,但我认为大多数浏览器都有一种魔力(我不是前端人员)。
现在您可以使用 CSS 将链接样式设置为按钮。
推荐阅读
- r - 在 R 中索引时出现“维数不正确”错误
- sql - MS SQL:将带有键值对的分隔字符串转换为键是列名的表
- python - 如何解决对象没有属性'strftime'
- php - 如何使用codeigniter从一个表中移动多行并插入另一个表
- python - 如何通过组合 value_counts() 来制作数据框
- kubernetes - 使用 Kubeadm 部署的 CoreDNS 和 Ubuntu 18.04 集群的 Kubernetes DNS 解析问题
- ruby-on-rails - RAILS_ROOT/public 下的 Ruby on Rails 文件授权
- sql - SQLite:即使有索引,大型数据库中的查询也非常慢
- java - 无法在 Intellij IDEA 的 Spring Boot 中添加一个等于和哈希码的实体?
- sql - 当许多连续行的压力值相同时查找Machine_ID