用JavaScript、class构造函数和jQuery编写返回顶部按钮

2023-12-09 18:07:56

JavaScript 普通函数版

// 1. 创建一个返回顶部按钮元素
const backToTopButton = document.createElement('button');

// 2. 设置按钮的文本和样式
backToTopButton.textContent = '返回顶部';
backToTopButton.classList.add('back-to-top-button');

// 3. 将按钮添加到页面底部
document.body.appendChild(backToTopButton);

// 4. 添加点击事件监听器
backToTopButton.addEventListener('click', () => {
  // 滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
});

class 构造函数版

class BackToTopButton {
  constructor() {
    // 创建按钮元素
    this.button = document.createElement('button');

    // 设置按钮的文本和样式
    this.button.textContent = '返回顶部';
    this.button.classList.add('back-to-top-button');

    // 将按钮添加到页面底部
    document.body.appendChild(this.button);

    // 添加点击事件监听器
    this.button.addEventListener('click', () => {
      // 滚动到页面顶部
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    });
  }
}

// 创建返回顶部按钮对象
const backToTopButton = new BackToTopButton();

jQuery 版

// 创建返回顶部按钮元素
const backToTopButton = $('<button>返回顶部</button>');

// 设置按钮的样式
backToTopButton.addClass('back-to-top-button');

// 将按钮添加到页面底部
$('body').append(backToTopButton);

// 添加点击事件监听器
backToTopButton.on('click', () => {
  // 滚动到页面顶部
  $('html, body').animate({
    scrollTop: 0,
  }, 500);
});

样式

/* 返回顶部按钮的样式 */
.back-to-top-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;

  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;

  background-color: #fff;
  color: #333;

  font-size: 16px;
  cursor: pointer;
}

/* 返回顶部按钮悬停时的样式 */
.back-to-top-button:hover {
  background-color: #ccc;
  color: #fff;
}