JS原生回到顶部效果

// 回到顶部
onload = function () {
    var oBtnTop = document.getElementById(‘toTop‘);
    var timer = null;

    oBtnTop.onclick = function () {

        moveScroll(0, 500);
        return false;
    };

    function moveScroll( iTarget, time ) {

        // 起点
        var start = document.documentElement.scrollTop || document.body.scrollTop;
        // 距离
        var dis =  iTarget - start;
        // 次数
        var count = Math.round( time / 30 );
        var num = 0;

        console.log(start);

        clearInterval(timer);
        timer = setInterval(function() {
            num += 1;
            // 匀减速
            var a = 1 - num / count;
            var cur = start + dis*( 1 - Math.pow(a,3));

            document.documentElement.scrollTop = cur;
            document.body.scrollTop = cur;

            if( num == count ){
                clearInterval(timer);
            }

        }, 30)

    }

};

  

时间: 2024-10-22 03:04:36

JS原生回到顶部效果的相关文章

自写jquery网页回到顶部效果,渐隐图标,引用js文件即可

唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~ 原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就尝试写了下,唔,没发现,还挺easy的说~~ 有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~ $(function(){ var $btn_top = $('<a id="scrollTop"><img src="css/web/image

JavaScript实现的回到顶部效果

参考自:http://www.imooc.com/learn/65 几乎所有的网站都会有回到顶部的功能,可以直接用锚点(#)实现,但是跳转的很生硬. 1.使用插件,我之前在介绍两个JQuery插件 — 滚动和轮播说过一个滚动插件,使用效果不错. 我在自己的小项目使用了:旅行笔记 2.原生的JS实现. 有两个点,一个是window 的滚动事件:window.onscroll,另一个是setInterval和clearInterval. 具体内容见代码,里面注释了. window.onload =

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

js——页面回到顶部

很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面回到顶部</title> <link rel="stylesheet&quo

jquery实现&quot;跳到底部&quot;,&quot;回到顶部&quot;效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

用Javascript实现回到顶部效果

用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶部时太快了,而且用户可能在看到某个感兴趣的东西想停下来,却停不下来),针对上面的缺点,我们试着用Javascript的方法来得到实现.思路是这个样子的: 1.首先用html和css构建基本的例子,代码如下 html部分: <div class="box"> <img sr

用javascript实现的“回到顶部”效果

最近在学习js,学习的视频来源是妙味js视频,在此首先感谢. 学到BOM这块的时候感触颇多,老师用的例子是“返回顶部”这个效果,虽然是个很老的效果,但是从中获益颇多.现记录如下:首先是HTML代码: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 #btn1 {position:fixed; bottom:0; right:0;} 6 </style> 7 <meta http-equiv=&

Javascript 实现回到顶部效果

html文件代码: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"><

实用的回到顶部效果

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