Fatal编程技术网
  • jquery/
  • Jquery 加上一句「；“返回顶部”按钮；

Jquery 加上一句「；“返回顶部”按钮；

jquery html css shopify

Jquery 加上一句「；“返回顶部”按钮；,jquery,html,css,shopify,Jquery,Html,Css,Shopify,我正在Shopify做一个项目，制作一个卖手表的网站。实际上，我已经在这里和那里轻松地处理了一些问题，但问题是当我必须在多个地方添加一些代码时。在我的theme.liquid中，我加载了我的.css和.js文件，这样我就可以轻松地在这两个文件中做一些事情，在我的网站上就会出现“魔力”。问题是，例如，如果我想添加一个返回顶部按钮，我知道我需要在.js文件中编写的函数，但我不知道在哪里放置我需要的theme.liquid文件的HTML和CSS部分。从我得到的信息来看，在这个特定的例子中，我需要在主文

我正在Shopify做一个项目，制作一个卖手表的网站。实际上，我已经在这里和那里轻松地处理了一些问题，但问题是当我必须在多个地方添加一些代码时。在我的theme.liquid中，我加载了我的.css和.js文件，这样我就可以轻松地在这两个文件中做一些事情，在我的网站上就会出现“魔力”。问题是，例如，如果我想添加一个返回顶部按钮，我知道我需要在.js文件中编写的函数，但我不知道在哪里放置我需要的theme.liquid文件的HTML和CSS部分。从我得到的信息来看，在这个特定的例子中，我需要在主文件中直接编写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: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      &ndash; {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      &ndash; {{ 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>


{%-if settings.favicon！=空白-%}
{%-endif-%}
{%-capture seo_title-%}
{%-if request.page_type='search'和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-%}
{%-如果当前_标记-%}
{%-assign meta_tags=当前_tags | join:'，'-%}&ndash；{{'general.meta.tags'| t:tags:meta_tags-}
{%-endif-%}
{%-如果当前页面！=1-%}
&恩达什；{{'general.meta.page'| t:page:current_page}
{%-endif-%}
{%-assign escape_page_title=page_title|escape-%}
{%-除非转义的页面标题包含shop.name-%}
&恩达什；{{shop.name}
{%-end除非-%}
{%-endcapture-%}
{{seo_title | strip}}
{%-如果页面描述-%}
{%-endif-%}
{%include'社交元标记'%}
{{'theme.scss.css'|资产| url |样式表(标签)}
变量主题={
断点：{
中等：750，
大号：990，
宽屏：1400
},
字符串：{
addToCart:{{'products.product.add_to_cart'|t|json}，
soldOut:{{'products.product.salled|t|json}，
不可用：{{'products.product.unavailable'|t|json}，
正规价格：{{'products.product.regular|u price'|t|json}，
售价：{{
“产品.产品.销售价格”| t | json}，
销售：{{'products.product.on|sale'|t|json}，
showMore:{{'general.filters.show|u more'|t|json}，
showLess:{{'general.filters.show|less'|t|json}，
addressError:{{'sections.map.address_error'|t|json}}，
AddressNorResults:{{{'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}，
外部：{{'general.accessibility.link_messages.external'|t|json}，
newWindowExternal:{{{'general.accessibility.link_messages.new_window_和_external'|t|json}，
removeLabel:{{'cart.label.remove'| t:product:'[product]'| json}，
更新：{{'cart.label.update'|t | json}}，
数量：{{'cart.label.quantity'|t|json}，
折扣总额：{{'cart.label.discounted_total'|t|json}，
regularTotal:{{'cart.label.regularTotal'|t | json}}，
priceColumn:{{'cart.label.price_column'|t|json}，
quantityMinimumMessage:{{{'products.product.quantity_minimum_message'|t|json}，
卡特尔错误：{{'cart.general.cart_error'|t|json}，
removedItemMessage:{{{'cart.general.removed_item_html'| t:quantity:'[quantity]'，link:'[link]'| json}，
单价：{{'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'）；
{%-如果request.page_类型包含'customers/'-%}
{%-endif-%}
{{content_for_header}}
{{'johndoe.css'|资产| url |样式表(标记)}
window.mlvedaShopCurrency=“{{shop.currency}}”；
window.shopCurrency=“{shop.currency}}”；
window.supported_currencies=“{{settings.mlvedaACS_supportedCurrencies}}”；
{%include'图标搜索“%”
{{'general.search.submit'|t}
{%include'图标关闭“%”
{{'general.search.close'|t}
{%-if settings.enable_ajax-%}
{%include'购物车弹出窗口'%}
{%-endif-%}
{%section'头“%”
{{content{u for{u layout}}
{%section'页脚'%}
{{-'节.幻灯片.导航{u说明{t-}


  • {{{general.accessibility.refresh_page'|t}
    • 

  • {{general.accessibility.selection_help|t}
    • 

{{'johndoe.js'|资产| url |脚本(标记)}
{%include'mlveda货币切换器'%}{%include'mlveda货币'%}{%include'mlveda标志'%}{%include'mlveda货币样式'%}
{%include'swymSnippet%}
{%include'gtranslate'，float:'yes%}
    我知道浏览这些代码有点烦人，但有人能帮我举例说明我需要在哪里放置CSS和HTML部分，以便我的按钮出现在我的网站上吗？

    我不确定我是否理解你的问题。如果你需要 
    <a href="#top">back to top</a>