精华内容
下载资源
问答
  • JavaScript简单实现网页回到顶部功能,大家可以参考一下
  • 网页回到顶部漂亮效果,超漂亮效果,网页中的从页面底直接回到顶部的超漂亮效果。
  • 原生js动画实现简单网页回到顶部功能

    代码注释清楚,直接看代码

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/gto.css">
        <script src="js/gto.js"></script>
    </head>
    <body>
        <div class="fa">
            <div class="goto">回到顶部</div>
        </div>
    </body>
    </html>
    

    CSS

    /*父盒子*/
    .fa {
        width: 100%;
        height: 2000px;
        /*父相*/
        position: relative;
    }
    .goto {
        width: 80px;
        height: 80px;
        /**/
        cursor: pointer;
        background-color: lightpink;
        /*边框圆角*/
        border-radius: 40px;
        /*子绝*/
        position: absolute;
        top: 1800px;
        left: 1100px;
        /*透明度*/
        opacity: .8;
        color: white;
        /*文字居中*/
        text-align: center;
        /*行高 = 高度  控制文字垂直居中*/
        line-height: 80px;
    }
    

    JavaScript

    // 压面加载事件
    window.onload = function () {
        // 获取元素对象
        var goto = document.querySelector(".goto");
        //定时器变量
        var timer=null;
        //验证
        console.log(goto);
        //绑定点击事件
        goto.onclick=function (){
            // 获取元素顶部被卷起的长度  支持dtd方式
            var s=document.documentElement.scrollTop;
            // 定时器 每10ms执行一次
            timer=window.setInterval(function (){
                // 每次走50
                s-=50;
                //  到顶部后清除定时器  必须清定时器  不然就死循环了
                if (s<0){
                    window.clearInterval(timer);
                }
                window.scrollTo(0,s);
            },10);
        }
    }
    

    好了,接下来看看它丑陋的效果~
    在这里插入图片描述
    其实就是应用了定时器和scrollTo属性,是不是超简单,动手做一下吧!

    展开全文
  • 在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top" style="display:block;"> &...

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能

    HTML代码:

    <p id="back-top" style="display:block;">
                <a href="#top">
                    <span>返回顶部</span>
                </a>
            </p>

    CSS代码:

    /* 返回顶部 开始 */
            #back-top {
                position: fixed; /*相对于浏览器窗口进行绝对定位*/
                bottom: 10px;
                right: 15px;
                z-index: 99;
            }
    
                #back-top span {
                    width: 50px;
                    height: 64px;
                    display: block; /*将元素显示为块级元素*/
                }
    
                #back-top a {
                    outline: none; /*突出元素*/
                }
            /* 返回顶部 结束 */

    JavaScript代码:

    $(function () {
                // 隐藏 #back-top
                $("#back-top").hide();
                // 滚动窗口时触发
                $(window).scroll(function () {
                    //滚动条的垂直偏移大于500时
                    if ($(this).scrollTop() > 500) {
                        //淡入显示
                        $('#back-top').fadeIn();
                    } else {
                        //淡入隐藏
                        $('#back-top').fadeOut();
                    }
                });
                // 单击按钮滚动到顶部
                $('#back-top a').click(function () {
                    //自定义动画
                    $('body,html').animate({
                        scrollTop: 0
                    }, 800);
                    return false;
                });
    })

     End!

    转载于:https://www.cnblogs.com/gygg/p/11265354.html

    展开全文
  • 网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,于是用js来实现下,画布多说,直接上代码
  • 一直没有添加 GoTop 回到顶部自动隐藏的 JS,只是简单固定在一个位置,有时候会挡住部分视线,尽管我的右下角几乎是没有可挡的内容。 今天趁着有空折腾,这里记录一下使用过程。 完整代码如下: <div style=...

    一直没有添加 GoTop 回到顶部自动隐藏的 JS,只是简单固定在一个位置,有时候会挡住部分视线,尽管我的右下角几乎是没有可挡的内容。

    今天趁着有空折腾,这里记录一下使用过程。

    完整代码如下:

    <div style="display: block;" id="gotop"></div>
    <script type="text/javascript">
        backTop=function (btnId){
            var btn=document.getElementById(btnId);
            var d=document.documentElement;
            var b=document.body;
            window.onscroll=set;
            btn.onclick=function (){
                btn.style.display="none";
                window.onscroll=null;
                this.timer=setInterval(function(){
                    d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                    b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                    if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
                },10);
            };
            function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
        };
        backTop('gotop');
    </script>

     

    自己已经有 top 按钮代码和样式了,所以不用另外添加 html 和 css,第一句就用不着了,添加一个 id=gotop 即可了,另外如果有 id 完全可以修改自己的 id 或者修改 js 代码中最后一句的调用 id 名称。

    <div><a class="top" id="gotop"></a></div>

    为不影响自己的样式,直接添加了 id=”gotop”,然后清理缓存,就出效果了。

    后来考虑到 footer 中放这么一堆代码比较乱,直接打包成一个 gotop.js 文件,直接调用就省事多了。

    新建记事本,复制以上代码,简单修改后如下:

    jQuery(document).ready(function($) {
        backTop = function(btnId) {
            var btn = document.getElementById(btnId);
            var d = document.documentElement;
            var b = document.body;
            window.onscroll = set;
            btn.onclick = function() {
                btn.style.display = "none";
                window.onscroll = null;
                this.timer = setInterval(function() {
                    d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
                    b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
                    if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
                },
                10);
            };
            function set() {
                btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
            }
        };
        backTop('gotop');
    });

     

    之后保存为 gotop.js,直接调用就搞定了。代码如下:

    <script type="text/javascript" src="http://www.tanglangxia.com/wordpress/wp-content/themes/creatic11/js/gotop.js"></script>

    把其中的 src 链接修改成自己的 js 链接即可。

    测试没问题之后,百度搜 JS 压缩,把之前的 JS 代码简单压缩一下,混淆就算了,覆盖原代码,保存完毕。

    最后用到了 JS 文件的合并与判断页面加载,把自己的 JS 在这里加载,完美实现选择性页脚加载 JS 以及 JS 文件的统一管理。

    转载于:https://www.cnblogs.com/zagelover/articles/3772759.html

    展开全文
  • 情景:应用中可滚动内容过多的话,回到顶部需要滚动多...今天做个小效果,仿网页回到顶部功能。 如下图 方案:采用帧布局FrameLayout 有两个Button,包含一个ScrollView,两个Button分别跳转至顶部和底部 布局: ...

    情景:应用中可滚动内容过多的话,回到顶部需要滚动多次。今天做个小效果,仿网页的回到顶部功能。

    如下图


    方案:采用帧布局FrameLayout 有两个Button,包含一个ScrollView,两个Button分别跳转至顶部和底部

    布局:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
         <ScrollView
            android:id="@+id/sc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true" >
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
    
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="What is Application
      Application和Activity,Service一样是android框架的一个系统组件,当android程序启动时系统会创建一个 application对象,用来存储系统的一些信息。通常我们是不需要指定一个Application的,这时系统会自动帮我们创建,如果需要创建自己 的Application,也很简单创建一个类继承 Application并在manifest的application标签中进行注册(只需要给Application标签增加个name属性把自己的 Application的名字定入即可)。
    
      android系统会为每个程序运行时创建一个Application类的对象且仅创建一个,所以Application可以说是单例 (singleton)模式的一个类.且application对象的生命周期是整个程序中最长的,它的生命周期就等于这个程序的生命周期。因为它是全局 的单例的,所以在不同的Activity,Service中获得的对象都是同一个对象。所以通过Application来进行一些,数据传递,数据共享 等,数据缓存等操作。
      MemoryLeak
      在Java中内存泄漏是只,某个(某些)对象已经不在被使用应该被gc所回收,但有一个对象持有这个对象的引用而阻止这个对象被回收。比如我 们通常会这样创建一个View TextView tv = new TextView(this);这里的this通常都是Activity。所以这个TextView就持有着这个Activity的引用。下面看张图 (Google IO 2011 ppt中抄得)
                    " >
                </TextView>
            </LinearLayout>
        </ScrollView>
    
        <Button
            android:id="@+id/btn_toTop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:text="^" />
    
        <Button
            android:id="@+id/btn_toBottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="V" />
    
    </FrameLayout>
    


    代码:

    public class MainActivity extends Activity {
    	private Button topBtn, bottomBtn;
    	private ScrollView sc;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.main);
    		sc = (ScrollView) findViewById(R.id.sc);
    		topBtn = (Button) findViewById(R.id.btn_toTop);
    		bottomBtn = (Button) findViewById(R.id.btn_toBottom);
    		topBtn.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				sc.post(new Runnable() {
    							public void run() {
    								// 滚动至顶部
    								sc.fullScroll(ScrollView.FOCUS_UP);
    							}
    						});
    
    
    			}
    		});
    		bottomBtn.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				sc.post(new Runnable() {
    							public void run() {
    								// 滚动到底部
    								sc.fullScroll(ScrollView.FOCUS_DOWN);
    							}
    						});
    			}
    		});
    
    	}
    
    }
    


    实现起来非常简单:今天朋友提得一个小需求。效果图如下:点击左上按钮到内容最底部,右下角按钮同理


     下载地址(免积分)

    展开全文
  • 用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用。哪个页面显示。 于是乎。本屌丝就尝试写了下。唔,没发现,还挺easy的说~~ 有屁我就快放...
  • 唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~ 原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示。 于是乎,本屌丝就尝试写了下,...
  • 回到网页顶部JS代码
  • 网页缓慢置顶回到顶部( html、css、js)。。。鼠标点击回到顶部的盒子后,网页可先快后缓慢最终回到最初顶部。使用js的定时器实现。 问题描述: 鼠标点击回到顶部的盒子后,网页可先快后缓慢最终回到最初顶部。 ...
  • 回到网页顶部js代码

    2011-11-11 14:38:54
    简单、容易,动态的实现回到顶部,下载完成直接应用即可...
  • 网页回到顶部总结

    2013-09-11 14:03:00
    首先在网页BODY标签结束之前加上: 返回顶部 2、再调用以下JS脚本部分: BackTop=function(btnId){ var btn=document.getElementById(btnId); var d=document.documentElement; window.onscroll=...
  • 实现效果:当页面内容比较多的时候,会出现滚动条,通过js代码做了一个实现 回到网页顶部 的功能,而且回到顶部的速度是逐步增加的。 思路:1、首先定义一个 回到网页顶部的链接标签,  2、获取这个链接标签对象...
  • <script language="javascript">... var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) .text($backToTopTxt).attr...
  • 右侧客服,自动收缩,很实用的,共享给大家。
  • 内容索引:脚本资源,jQuery,回到顶部,jQuery滚动插件 回到网页TOP,jQuery平滑滚动至网页顶部的插件,拉动你的滚动条,注意右边哦~ 适合页面高度比较高的网页,方便用户回网页导航部分,推荐下载。当网页不是处于最...
  • 1、html <div id="totop"></div> 2、css #totop { width: 51px; height: 57px; cursor: pointer; position: fixed; right: 10px; top: 60%; background...
  • 回到网页顶部的方法

    2014-03-26 09:13:07
    下面就说下简单的返回顶部效果的代码实现,附注释说明。 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 代码如下: ...
  • 网页吸顶&&回到顶部

    2018-08-14 20:03:00
     回到顶部  var oNav = document.getElementById("nav"); var box = document.getElementById("t");  window.onscroll = function () {  var sTop = document.documentElement.scrollTop || document.body....
  • CSS实现网页回到顶部”的效果代码,用CSS hack实现IE6的兼容,功能:  1、和论坛的回顶部悬浮层基本一样,当浏览器的滚动条滚动(&gt;0)时,悬浮层出现,当滚动条滚动为0时隐藏,用到了window.onscroll事件。 ...
  • NULL 博文链接:https://zhibin07.iteye.com/blog/1490122
  • function toTop(){ // 1.无过渡效果 // $(document).scrollTop(0); // 2.有过渡效果 $("html,body").animate({ scrollTop: 0 }, 800); }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 448
精华内容 179
关键字:

网页回到顶部