html回到顶部代码

HTML代码
<p id="back-to-top"><a href="#top">返回顶部</a></p>
CSS代码
 p#back-to-top{
            position:fixed;
            display:none;
            bottom:100px;
            right:80px;
        }
js代码
 $(function(){
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(1500);
                }
                else
                {
                    $("#back-to-top").fadeOut(1500);
                }
            });

            //当点击跳转链接后,回到页面顶部位置
            $("#back-to-top").click(function(){
                if ($(‘html‘).scrollTop()) {
                    $(‘html‘).animate({ scrollTop: 0 }, 100);//动画效果
                    return false;
                }
                $(‘body‘).animate({ scrollTop: 0 }, 100);
                return false;
            });
        });
    });

  记得要引用jQuery文件

时间: 2024-10-13 03:56:46

html回到顶部代码的相关文章

悬浮回到顶部代码

<div id="floatPanel"> <div class="ctrolPanel" style="right:20px;"> <a class="arrow" href="#"><img title="点击回到顶部" src="images/huidao.jpg" /></a> </div>

jquery方法回到顶部代码

<style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;} /*用CSS表达式(expr

超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码

//以下代码放到一个adapt.js文件当中 (function (doc, win) {   var docEl = doc.documentElement,     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',     recalc = function () {       var clientWidth = docEl.clientWidth;       if (!clientWi

Angular回到顶部按钮指令

之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> <back-button></back-button> 指令的单词在html中使用横杠分隔,而在js代码中使用驼峰法,没毛病,简单不解释: /* 回弹按钮指令 * */ app.directive('backButton', function() { return { restrict: 'E

【JavaScript Demo】回到顶部功能实现

随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布局 (1) 我们先简单的搭建一个长度为1200px的页面,保证视口的高度足够. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

回到顶部功能

RUNJS地址:http://runjs.cn/code/acqs9fdd 主要用了 1.position:fixed;设置标签相对当前窗口的位置. 2.scroll()方法:监听滚动条 3.scrollTop()方法:窗口中滚动条的垂直偏移 html代码: <script id="jquery_182" type="text/javascript" class="library" src="/js/sandbox/jquery/

JQuery实现淡入淡出的回到顶部按钮

效果如下: 按钮的html和css代码如下. <div id="gotop"> <i class="fa fa-chevron-up"></i> </div> i标签<i class="fa fa-chevron-up"></i>使用了Font Awesome,400多个图标(包括QQ.微信.微博)只要30KB,可无限放大,不需要js,非常的??. 按钮gotop用fixed

angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic

首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" /> <script src="../bower_components/swiper/dist/js/swiper.jquery.min.js

实用的回到顶部效果

在各大网站上我们都可以看到一个回到顶部按钮,但它是怎么做的呢? 其实很简单,我们只需要将scrollTop的值置为0即可.但为了让回滚的效果更舒服,我们需要利用一点运动学的知识让页面滚动的速度由快变慢,例如speed = scrollTop/8. 先给出布局代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>