代码实现给网站添加返回顶部功能

创客云

代码实现给网站添加返回顶部功能,瀑布流风格的网站开始流行之后,很多网站都出现了一个回到顶部的功能,对于瀑布流布局的网站来讲,这可以说是必须要有的一个功能,因为网站下拉了很长之后,需要返回顶部的时候,如果拖着滚动条去拉,那种麻烦相信大家都体验过。

对于非瀑布流网站来说,增加这种效果必要性其实不大,除非你的网站上文章很长,用户需要看好几屏才能看完。需不需要是基于用户体验上的考虑,咱在这里先按下不说,下面来看一下怎么通过一段 JavaScript 代码很简单的给网站添加一个回到顶部的按钮吧。首先把这段代码添加到网站的 JavaScript 文件或者直接添加到 footer.php 文件中。

  1. jQuery(document).ready(function($){
  2. 	if ($(window).scrollTop() != "0")
  3. 		$(".scroll-to-top").fadeIn(1200) //如果距离顶部的距离不为0,显示.scroll-to-top
  4. 	var scrollDiv = $(".scroll-to-top");
  5. 	$(window).scroll(function()
  6. 	{
  7. 		if ($(window).scrollTop() == "0")
  8. 			$(scrollDiv).fadeOut(350)//如果距离顶部的距离为0,隐藏scrollDiv
  9. 		else
  10. 			$(scrollDiv).fadeIn(1200)//其他情况下,显示scrollDiv
  11. 	});
  12. 	$(".scroll-to-top").click(function(){
  13. 		$("html, body").animate({
  14. 			scrollTop: 0 //点击按钮,滚动回到顶部
  15. 		}, 600)
  16. 	})
  17.  
  18. });

然后是 CSS 代码

  1. .scroll-to-top {
  2.   display: none;
  3.   width: 70px;
  4.   height: 32px;
  5.   line-height: 32px;
  6.   color: #fff;
  7.   text-align: center;
  8.   background-color: #333;
  9.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  10.   cursor: pointer;
  11.   bottom: 2%;
  12.   position: fixed;
  13.   right: 15px;
  14.   z-index: 999;
  15. }
  16. .scroll-to-top:hover {
  17.   opacity: .8;
  18. }

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

  1. <div class="scroll-to-top" style="display: block;">返回顶部</div>

只有这几段代码,回到顶部的功能就添加完毕了,测试了一下,效果非常好,其实用户体验和前端设计很多地方拼得就是细节,细节做到了,用户用着爽了,用户体验自然就好了。

本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/55618.html
云模板

发表评论