引导设置页面回到顶端悬停提示的方法

  介绍

这篇文章将为大家详细讲解有关引导设置页面回到顶端悬停提示的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>引导设置页面回到顶端悬停提示方法如下:

1,首先在身体中添加“返回顶部”按钮

& lt; body>   & lt; div类=癵o-top"祝辞   & lt; div类=癮rrow"祝辞& lt;/div>   & lt; div类=皊tick"祝辞& lt;/div>   & lt;/div>   & lt;/body>

2, css的定义

div .go-top {   显示:没有;   透明度:0.6;   z - index: 999999;   位置:固定;   底部:113 px;   左:90%;   margin-left: 40像素;   边界:1 px固体# a38a54;   宽度:38 px;   高度:38 px;   background - color: # eddec2;   border - radius: 3 px;   光标:指针;   }   div .go-top:{徘徊   透明度:1;   过滤器:α(不透明度=100);   }   div .go-top div .arrow {   位置:绝对的;   左:10 px;   上图:1 px;   宽度:0;   高度:0;   边界:9 px固体透明;   border-bottom-color: # cc3333;   }   div .go-top div .stick {   位置:绝对的;   左:15 px;   上图:15 px;   宽度:8 px;   高度:14 px;   显示:块;   background - color: # cc3333;   -webkit-border-radius: 1 px;   -moz-border-radius: 1 px;   border - radius: 1 px;   }

使用固定的定位,让按钮始终出现在右下角,通过设定左:90%可以使按钮在右方出现,但又不会太紧贴滚动条。

3,按钮默认不可见,当滚动页面到一定高度后,按钮出现

$(函数(){   $(窗口).scroll(函数(){   if($(窗口).scrollTop()比;1000)   美元(& # 39;div.go-top& # 39;),告诉();   其他的   美元(& # 39;div.go-top& # 39;) hide ();   });   美元(& # 39;div.go-top& # 39;) .click(函数(){   美元(& # 39;html,身体# 39;)。动画({scrollTop: 0}, 1000);   });   });

关于引导设置页面回到顶端悬停提示的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

引导设置页面回到顶端悬停提示的方法