回到顶部

1.创建svg图片代码

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724594712811" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1850" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M528.032 226.7648l0.0832-0.0768c105.5232-105.536 252.2688-143.0656 382.72-111.2 31.872 130.4576-5.664 277.1968-111.1936 382.7264-1.4592 1.4592-2.9248 2.9056-4.4032 4.3392l-58.0352 58.0416 47.9808 84.768a76.8 76.8 0 0 1-3.7888 81.6832l-126.272 181.5488c-24.2112 34.816-72.0768 43.4112-106.8992 19.2a76.8 76.8 0 0 1-3.712-2.7584l0.3264-0.4096a41.6192 41.6192 0 0 1-14.8544-54.4768 34.624 34.624 0 0 0-0.0896-0.0384c24.9984-42.6752 28.0128-98.496 11.0464-155.456-61.984 13.824-129.4848-3.392-177.7152-51.616-48.2176-48.2176-65.4272-115.6992-51.6288-177.6704-56.928-16.9472-112.7232-13.9264-155.3792 11.0592a35.2384 35.2384 0 0 0-0.0384-0.0896 41.6192 41.6192 0 0 1-54.4768-14.848l-0.3584 0.2816c-23.4112-30.1312-21.28-73.6832 6.4-101.3632a76.8 76.8 0 0 1 10.4576-8.7488l181.6512-126.336a76.8 76.8 0 0 1 81.5232-3.8784l84.4032 47.5136 60.3648-60.3648c0.6208-0.6272 1.2544-1.2352 1.888-1.8304z m-261.504 378.8608c17.8752 45.9968 37.2864 79.4624 58.2272 100.4032 20.512 20.512 52.096 38.6112 94.7584 54.2912a19.2 19.2 0 0 1 4.896 33.3824l-72.8576 54.6368a19.2 19.2 0 0 1-30.1888-19.8336l3.1808-13.2736a19.2 19.2 0 0 0-27.8784-21.3248l-64.2624 35.1232a19.2 19.2 0 0 1-26.0544-26.048l37.4784-68.5824a19.2 19.2 0 0 0-19.5648-28.2176l-32.3264 4.6272a19.2 19.2 0 0 1-18.08-30.528l59.4112-79.2192a19.2 19.2 0 0 1 33.2544 4.5632zM621.2032 405.12c29.9904 29.9968 78.6176 29.9968 108.608 0 29.9968-29.984 29.9968-78.6112 0-108.608-29.9904-29.9904-78.6176-29.9904-108.608 0-29.9904 29.9968-29.9904 78.624 0 108.608z" fill="#12affa" p-id="1851" data-spm-anchor-id="a313x.search_index.0.i1.62433a810ptZyU"></path></svg>

2.保存图片路径

• 在static\svg\中保存图片,并重命名back-top.svg

3.文件中引入

在src\css\custom.css文件中引入

/* 返回顶部按钮样式 */
[class*="backToTopButton"] {
  /* 全局样式覆盖 */
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url(/static/svg/back-top.svg) !important;
  background-size: cover !important;
  transition: transform 0.8s ease-in-out !important;
}

[class*="backToTopButton"]:hover {
  background-color: transparent !important;
  transform: scale(1.2) !important;
}

[class*="backToTopButton"]::after {
  background-color: transparent !important;
}