返回顶部功能的实现

实现该功能一共只需三步:

第一步: 在页面底部加入HTML代码

把下面的HTML加入到页面底部, 最好是紧挨着</body>标签:

<a href="#" class="go-top"><div></div></a>

第二步: 加入JS

if (jQuery(‘.go-top‘).length > 0) {
            jQuery(window).scroll(function () {
                if (jQuery(this).scrollTop() > 100) {
if(parseInt(jQuery(‘.go-top‘).css("right"))==-60){
jQuery(‘.go-top‘).animate({right:20},500);}
                }
                else {
if(parseInt(jQuery(‘.go-top‘).css("right"))==20){
jQuery(‘.go-top‘).animate({right:-60},500);}
                }
            });
            jQuery(‘.go-top‘).click(function () {
                jQuery("html,body").animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        }

第三步: 添加CSS

.go-top{
position: fixed;
right: -60px;
bottom:20px;
z-index: 100;
}
.go-top div{
background-image:url(‘/wp-content/uploads/2015/07/gototop.png‘);
width:48px;
height:48px;
}

最后的效果看我的博客就知道了~

时间: 2024-10-21 09:42:04

返回顶部功能的实现的相关文章

使用jQuery实现返回顶部功能

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可

页面返回顶部功能的实现

这是一个小小的功能,jQuery实现的话很简单,即animate()方法,特地记录一下. 首先贴一下返回顶部的功能代码: 方法一: 1 $(function(){ 2 $("#toTop").click(function(){ 3 $("html").animate({"scrollTop": "0px"},100); //IE,FF 4 $("body").animate({"scrollTop

前端 css+js实现返回顶部功能

描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button> 3 </div> CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position: f

js&quot;返回顶部&quot;功能实现

JS代码: <script src="../../static/js/base/jquery/jquery.min.js"></script> <script>//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失$(function () { $("#sidepanel").fadeOut(100); $(window).scroll(function(){ if ($(window).scrollTop()>

js+JQuery实现返回顶部功能

在HTML头部添加 <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 然后 jquery 中写入 <script>        $(function () {            //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失            $(function () {    

jquery 实现返回顶部功能

1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scroll事件,即发生scroll事件,则进行按钮的显示隐藏的操作判断. 判断方法是:滚动条垂直高度大于某个值,则显示按钮(show()):否则则隐藏按钮(hide()): 3. 绑定点击返回顶部按钮的事件,给予一个动画,scroll到顶部(可以以body标签的位置作为参考) 例码如下: html: <d

jQuery实现返回顶部功能

1 <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 2 <script> 3 $(function(){ 4 //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 5 $(function () { 6 $(window).scroll(function(){ 7 if ($(window).scrollTop()>

Web前端 页面功能——点击按钮返回顶部的实现方法

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) html代码 <a href="javascript:scroll(0,0)">

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi