在瀑布流風(fēng)格的網(wǎng)站開始流行之后，很多網(wǎng)站都出現(xiàn)了一個回到頂部的功能，對于瀑布流布局的網(wǎng)站來講，這可以說是必須要有的一個功能，因為網(wǎng)站下拉了很長之后，需要返回頂部的時候，如果拖著滾動條去拉，那種麻煩相信大家都體驗過。

對于非瀑布流網(wǎng)站來說，增加這種效果必要性其實不大，除非你的網(wǎng)站上文章很長，用戶需要看好幾屏才能看完。需不需要是基于用戶體驗上的考慮，咱在這里先按下不說，下面來看一下怎么通過一段 JavaScript 代碼很簡單的給網(wǎng)站添加一個回到頂部的按鈕吧。

首先把這段代碼添加到網(wǎng)站的 JavaScript 文件或者直接添加到 footer.php 文件中。

jQuery(document).ready(function($){
	if ($(window).scrollTop() != "0")
		$(".scroll-to-top").fadeIn(1200) //如果距離頂部的距離不為0，顯示.scroll-to-top
	var scrollDiv = $(".scroll-to-top");
	$(window).scroll(function()
	{
		if ($(window).scrollTop() == "0")
			$(scrollDiv).fadeOut(350)//如果距離頂部的距離為0，隱藏scrollDiv
		else
			$(scrollDiv).fadeIn(1200)//其他情況下，顯示scrollDiv
	});
	$(".scroll-to-top").click(function(){
		$("html, body").animate({
			scrollTop: 0 //點擊按鈕，滾動回到頂部
		}, 600)
	})

});

然后是 CSS 代碼

/* 回頂部 */
.scroll-to-top {
  display: none;
  width: 70px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  background-color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  bottom: 2%;
  position: fixed;
  right: 15px;
  z-index: 999;
}
.scroll-to-top:hover {
  opacity: .8;
}

最后，把下面的一段代碼加到 footer.php 文件里即可。

<div class="scroll-to-top" style="display: block;">回到頂部</div>

只有這幾段代碼，回到頂部的功能就添加完畢了，測試了一下，效果非常好，其實用戶體驗和前端設(shè)計很多地方拼得就是細節(jié)，細節(jié)做到了，用戶用著爽了，用戶體驗自然就好了。關(guān)于以上代碼，有什么問題，歡迎在留言中提出。