网站功能增加调整代码

1、网站返回网页顶部代码

<!-- Back To Top Button -->
<button id="backToTop" aria-label="Back to top">
  ↑
</button>

<style>
  #backToTop {
    position: fixed;
    right: 28px;
    bottom: 90px;
    width: 46px;
    height: 46px;
    border: 2px solid #ff4b2b;
    background: #164782;
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
  }

  #backToTop:hover {
    background: #ff4b2b;
    color: #ffffff;
    transform: translateY(-3px);
  }

  #backToTop.show {
    display: flex;
  }

  @media (max-width: 768px) {
    #backToTop {
      right: 18px;
      bottom: 70px;
      width: 42px;
      height: 42px;
      font-size: 24px;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const backToTop = document.getElementById("backToTop");

    window.addEventListener("scroll", function () {
      if (window.scrollY > 300) {
        backToTop.classList.add("show");
      } else {
        backToTop.classList.remove("show");
      }
    });

    backToTop.addEventListener("click", function () {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    });
  });
</script>

2、固定在网页右侧的悬浮按钮组代码

<!-- 右侧营销悬浮按钮开始 -->
<style>
  /* 整个悬浮工具栏 */
  #right-contact-tools {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    font-family: Arial, sans-serif;
  }

  #right-contact-tools,
  #right-contact-tools * {
    box-sizing: border-box;
  }

  /* 按钮列表 */
  .rct-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* 单个按钮 */
  .rct-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: #d71920;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transition:
      background-color 0.2s ease,
      transform 0.2s ease;
  }

  .rct-button:hover,
  .rct-button:focus-visible {
    background: #b71117;
    color: #fff;
    transform: translateX(-3px);
  }

  .rct-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .rct-button svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: currentColor;
  }

  /* 微信二维码卡片 */
  .rct-wechat-card {
    position: absolute;
    right: 58px;
    top: 50%;
    width: 190px;
    padding: 14px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(10px);
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease,
      transform 0.2s ease;
  }

  .rct-wechat-card.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
  }

  .rct-wechat-card::after {
    content: "";
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 9px 0 9px 9px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }

  .rct-wechat-card img {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 8px;
    object-fit: contain;
  }

  .rct-wechat-title {
    margin: 0 0 4px;
    color: #222;
    font-size: 15px;
    font-weight: 700;
  }

  .rct-wechat-text {
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .rct-close {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777;
    font-size: 22px;
    line-height: 26px;
    cursor: pointer;
  }

  .rct-close:hover {
    color: #d71920;
  }

  /* 手机端 */
  @media (max-width: 767px) {
    #right-contact-tools {
      right: 8px;
    }

    .rct-button {
      width: 40px;
      height: 40px;
    }

    .rct-button svg {
      width: 22px;
      height: 22px;
    }

    .rct-wechat-card {
      position: fixed;
      top: 50%;
      left: 50%;
      right: auto;
      width: 190px;
      transform: translate(-50%, -50%) scale(0.96);
    }

    .rct-wechat-card.is-open {
      transform: translate(-50%, -50%) scale(1);
    }

    .rct-wechat-card::after {
      display: none;
    }
  }
</style>

<div id="right-contact-tools">
  <div class="rct-buttons">

    <!-- WhatsApp：修改下面的电话号码 -->
    <a
      class="rct-button"
      href="https://wa.me/8613712345678"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Contact us on WhatsApp"
      title="WhatsApp"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.04 2a9.84 9.84 0 0 0-8.51 14.77L2 22l5.38-1.49A9.97 9.97 0 0 0 12.04 22 10 10 0 0 0 12.04 2Zm0 18.18a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.19.89.85-3.11-.2-.32a8.05 8.05 0 1 1 6.97 3.85Zm4.43-6.03c-.24-.12-1.43-.71-1.65-.79-.22-.08-.38-.12-.54.12-.16.24-.63.79-.77.95-.14.16-.28.18-.52.06-.24-.12-1.02-.38-1.94-1.19-.72-.64-1.2-1.43-1.34-1.67-.14-.24-.01-.37.11-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.58.18 1.1.16 1.51.1.46-.07 1.43-.59 1.63-1.15.2-.57.2-1.05.14-1.15-.06-.1-.22-.16-.46-.28Z"/>
      </svg>
    </a>

    <!-- 邮箱：修改下面的邮箱地址 -->
    <a
      class="rct-button"
      href="yuanleyu820@gmail.com"
      aria-label="Send us an email"
      title="Email"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z"/>
      </svg>
    </a>

    <!-- 微信按钮 -->
    <button
      type="button"
      class="rct-button"
      id="rct-wechat-button"
      aria-label="Show WeChat QR code"
      aria-expanded="false"
      aria-controls="rct-wechat-card"
      title="WeChat"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M9.5 3C4.8 3 1 6.05 1 9.82c0 2.17 1.28 4.1 3.27 5.35L3.5 17.8l3.08-1.55c.93.25 1.91.38 2.92.38.37 0 .74-.02 1.1-.06a6.05 6.05 0 0 1-.35-2.01c0-3.6 3.35-6.52 7.48-6.52.08 0 .17 0 .25.01C16.99 5.14 13.66 3 9.5 3Zm-2.93 5.3a1.05 1.05 0 1 1 0-2.1 1.05 1.05 0 0 1 0 2.1Zm5.86 0a1.05 1.05 0 1 1 0-2.1 1.05 1.05 0 0 1 0 2.1Z"/>
        <path d="M23 14.56c0-3.05-3.02-5.52-6.75-5.52s-6.75 2.47-6.75 5.52 3.02 5.52 6.75 5.52c.8 0 1.57-.12 2.28-.33L21 21l-.62-2.16C22 17.82 23 16.28 23 14.56Zm-8.98-1.23a.88.88 0 1 1 0-1.76.88.88 0 0 1 0 1.76Zm4.46 0a.88.88 0 1 1 0-1.76.88.88 0 0 1 0 1.76Z"/>
      </svg>
    </button>
  </div>

  <!-- 微信二维码内容 -->
  <div
    class="rct-wechat-card"
    id="rct-wechat-card"
    aria-hidden="true"
  >
    <button
      type="button"
      class="rct-close"
      id="rct-wechat-close"
      aria-label="Close WeChat QR code"
    >
      ×
    </button>

    <!-- 把图片地址替换成你的二维码图片地址 -->
    <img
      src="二维码图片地址"
      alt="WeChat QR code"
    >

    <p class="rct-wechat-title">Scan to contact us</p>
    <p class="rct-wechat-text">
      WeChat: +86 15388922075
    </p>
  </div>
</div>

<script>
(function () {
  "use strict";

  var tools = document.getElementById("right-contact-tools");
  var button = document.getElementById("rct-wechat-button");
  var card = document.getElementById("rct-wechat-card");
  var closeButton = document.getElementById("rct-wechat-close");

  if (!tools || !button || !card || !closeButton) {
    return;
  }

  function openCard() {
    card.classList.add("is-open");
    card.setAttribute("aria-hidden", "false");
    button.setAttribute("aria-expanded", "true");
  }

  function closeCard() {
    card.classList.remove("is-open");
    card.setAttribute("aria-hidden", "true");
    button.setAttribute("aria-expanded", "false");
  }

  function toggleCard() {
    if (card.classList.contains("is-open")) {
      closeCard();
    } else {
      openCard();
    }
  }

  button.addEventListener("click", function (event) {
    event.stopPropagation();
    toggleCard();
  });

  card.addEventListener("click", function (event) {
    event.stopPropagation();
  });

  closeButton.addEventListener("click", closeCard);

  /* 点击二维码以外区域时关闭，但不添加任何黑色蒙版 */
  document.addEventListener("click", function (event) {
    if (!tools.contains(event.target)) {
      closeCard();
    }
  });

  /* 按 ESC 键关闭 */
  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
      closeCard();
      button.focus();
    }
  });
})();
</script>
<!-- 右侧营销悬浮按钮结束 -->