jquery右下角返回顶部

实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置。要先引用jquery.min.js

<script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>

html:

<div id="back-to-top" style="display:none">返<br />回<br />顶<br />部</div>

css:

  #back-to-top{
       width: 25px;position:fixed;bottom:20px;right:20px;border:solid 1px #ccc;cursor:pointer;text-align: center;color: red;
        _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
        }

js:

jQuery(function ($) {
        //当滚动条的位置处于距顶部20像素以下时,跳转链接出现,否则消失
            $(window).scroll(function(){
                if (jQuery(window).scrollTop()>20){
                    jQuery("#back-to-top").fadeIn(1000);
                }
                else
                {
                    jQuery("#back-to-top").fadeOut(1000);
                }
            });    

            //当点击跳转链接后,回到页面顶部位置    

            jQuery("#back-to-top").click(function(){
                jQuery(‘body,html‘).animate({scrollTop:0},1000);
                return false;
            });
    }); 
时间: 2024-10-10 08:00:24

jquery右下角返回顶部的相关文章

使用jQuery实现返回顶部功能

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

jQuery实现返回顶部按钮功能

html结构 <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <span class="toolbar-btn" id="backtop"> <i class="toolbar-icon icon-upload2"></i> //图标字体 &l

jQuery实现返回顶部

由于项目需要,写了个返回顶部的小功能... 1 /*返回顶部*/ 2 function toTop() { 3 $(".to_top").hide(); 4 $(window).scroll(function(){ 5 var scroll_top = $(document).scrollTop(); 6 if(scroll_top != 0){ 7 $(".to_top").show(); 8 }else{ 9 $(".to_top").hid

一句jQuery代码返回顶部

效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/j

js+JQuery实现返回顶部功能

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

jquery实现返回顶部效果

jQuery("#gotop").css('display','none');jQuery(window).scroll(function(){if(jQuery(this).scrollTop()>100){jQuery("#gotop").fadeIn(1000)}else{jQuery("#gotop").fadeOut(750)}});jQuery("#gotop").click(function(){jQuer

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()>

博客园安装jQuery返回顶部代码教程

博客园支持上传js文件,这给博主提供了很大的拓展空间,例如返回顶部的jQuery代码. 首先先上传返回顶部图片到博客园 topback.gif: 然后在scrolltopcontrol.js中找到topback.gif的地址,将其替换成上传至博客园中的文件地址(右键topback.gif → 复制链接地址) scrolltopcontrol.js 代码: var scrolltotop={ setting:{ startline:100, //起始行 scrollto:0, //滚动到指定位置