回到顶部带动画

// 获取元素
var bodyTop = document.getElementById("top");
// 回到顶部的按钮
var totop = document.getElementById("totop");
// top 是window自带的一个属性,此属性是只读的。此属性默认是window对象
// 当拖动滚动条的时候执行
window.onscroll = function () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//1 当拖动滚动条的时候,当内容滚动出去 10px的时候,改变top的高度,并且显示回到顶部按钮
if (scrollTop > 10) {
// 改变top
bodyTop.className = ‘header fixed‘;
// 显示回到顶部
totop.style.display = ‘block‘;
} else {
// 改变top
bodyTop.className = ‘header‘;
// 显示回到顶部
totop.style.display = ‘none‘;
}
}

//2 当点击回到顶部按钮的时候,动画的方式,回到最上面,让滚动距离为0
var timerId = null;
totop.onclick = function () {
if (timerId) {
clearInterval(timerId);
timerId = null;
}
timerId = setInterval(function () {
// 步进 每次移动的距离
var step = 10;
// 目标位置
var target = 0;
// 获取当前位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var current = scrollTop;
if (current > target) {
step = -Math.abs(step);
}
// 判断当前是否到达目标位置
if (Math.abs(current - target) <= Math.abs(step)) {
clearInterval(timerId);
document.body.scrollTop = target;
document.documentElement.scrollTop = target;
return;
}

current += step;
document.body.scrollTop = current;
document.documentElement.scrollTop = current;
}, 5);
}

原文地址:https://www.cnblogs.com/pxxdbk/p/12655365.html

时间: 2024-10-07 11:14:08

回到顶部带动画的相关文章

转:5种回到顶部的写法从实现到增强

http://www.cnblogs.com/xiaohuochai/p/5836179.html 前面的话 本文先详细介绍回到顶部的5种写法,然后对其实现功能增加,最后得到最终实现 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;">

5种回到顶部的写法从实现到增强

× 目录 [1]写法 [2]增强 [3]实现 前面的话 本文先详细介绍回到顶部的5种写法,然后对其实现功能增加,最后得到最终实现 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;"> <div id="topAnchor&

js回到顶部------转载

[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 1 2 3 4 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" styl

5种回到顶部的写法

写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;">     <div id="topAnchor"></div>     <a href="#topAnchor" s

js回到顶部动画效果实现方法

达到回到顶部效果主要原理就是修改滚动条距离顶部的位置为零,滚动条距离顶部的位置介绍: 获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop 并且,document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效.比如document.body.scrollTop能取到值的时候,document.documentE

HTML学习笔记之二(回到顶部 与 回究竟部)

回到顶部 回究竟部 回到顶部的俩种方式 一.使用js $('html, body').animate({ scrollTop: 0 }, 'fast');//带动画 $('html,body').scrollTop(0); //不带动画 $(window).scroll(function () { //You've scrolled this much: $('p').text("You've scrolled " + $(window).scrollTop() + " pi

jQuery之锚点带动画跳转特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta charset="utf-8"> <head> <title>jQuery之锚点带动画跳转特效</title> <script

HTML学习笔记之二(回到顶部 与 回到底部)

回到顶部 回到底部 回到顶部的俩种方式 一.使用js $('html, body').animate({ scrollTop: 0 }, 'fast');//带动画 $('html,body').scrollTop(0); //不带动画 $(window).scroll(function () { //You've scrolled this much: $('p').text("You've scrolled " + $(window).scrollTop() + " pi

JQuery实现回到顶部

当一个页面的内容比较长时,一般都在页面的右下角的固定位置有个"回到顶部"的按钮,点击后,页面的滚动条逐渐回滚到顶部,本篇来描述一个它的实现过程. 首先,需要有一个按钮 <button id="btn_top" title="回到顶部"> 回到顶部 </button> 然后给这个元素定位到右下角,我们使用position:fixed.下面这个按钮加一些最基本的样式 #btn_top { position: fixed; bo