在日常浏览网页的时候，我们常常需要去滚动页面以查看更多的内容，这往往需要消耗大量的时间和精力。而有一种非常简单的解决方案就是添加一个“回到顶部”的按钮，让用户在浏览完页面后可以直接回到页面顶部，从而提高了用户的体验感。

那么如何添加“回到顶部”的按钮呢？以下是一些简单的HTML和JavaScript代码：

HTML代码：

```

```

JavaScript代码：

```

$(document).ready(function(){

$(window).scroll(function(){

if($(this).scrollTop() > 100){

$('#back-to-top').fadeIn();

}else{

$('#back-to-top').fadeOut();

}

});

$("#back-to-top").click(function(){

$("html, body").animate({scrollTop : 0},800);

return false;

});

});

```

以上代码是使用jQuery编写的，通过监听用户的滚动事件来控制“回到顶部”按钮的显示和隐藏。当用户滚动超过100px时，将显示“回到顶部”按钮。点击按钮时，会使用动画效果将页面平滑地滚动回顶部。

这段代码的实现思路比较简单，但对于初学者来说可能还不太容易理解。下面我们逐一解析其中的代码逻辑：

1. HTML代码

HTML代码部分不太需要过多的解释，主要是一个链接按钮，点击后会执行JavaScript函数，实现滚动回顶部的效果。这里需要注意的是，我们可以添加一些CSS样式来美化这个按钮，比如改变其大小、颜色等。

2. JavaScript代码

首先通过 $(document).ready() 函数在页面加载完成后执行代码。接下来通过 $(window).scroll() 函数来监听用户的滚动事件，当页面滚动距离超过100px时，就让“回到顶部”按钮显示出来，否则就隐藏。这里用到的是 jQuery 的 fadeOut() 和 fadeIn() 函数，通过改变元素的透明度来实现渐隐渐现的效果。

最后是点击“回到顶部”按钮后的效果。这里用到了 jQuery 的 animate() 函数，可以实现平滑地滚动到顶部的效果。animate() 函数的第一个参数是一个对象，表示滚动的终点坐标（这里是scrollTop : 0）。第二个参数是动画的时间，这里是800毫秒。最后通过 return false 阻止浏览器默认的链接跳转行为。

至此，我们就完成了一个简单的“回到顶部”按钮的代码。当然，这只是最基础的实现方式，还有很多高级的技巧可以通过JS、CSS、jQuery等来实现，比如淡入淡出、滚动滑轮等效果。但无论采用何种方式，添加一个“回到顶部”按钮都能提高用户的体验，让用户更加轻松地访问网页，浏览更多的内容。