x=x-20; 设置回到每10s的速度,

function gotoTop()
{
var x=document.body.scrollTop||document.documentElement.scrollTop;
var timer = setInterval(function()
{
x=x-20;
if(x<20)
{
x=0;
window.scrollTo(x,x);
clearInterval(timer);
}
window.scrollTo(x,x);
},10);

}

锚点设置:

$(".item").on('click',function(){

if($('#' + $(this).attr("name")).offset() != undefined)
{
$("html, body").animate({
scrollTop: $('#' + $(this).attr("name")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});

return false;
}
});

点击dom设置id或者name属性即可 此处使用的是name

js回到顶部 动画速度 (自己记录)的更多相关文章

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

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  2. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  3. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  4. js回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  7. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  8. JS 回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

随机推荐

  1. 2. Jmeter压力测试简单教程(包括服务器状态监控) (转)

    转自:https://blog.csdn.net/cbzcbzcbzcbz/article/details/78023327 前段时间公司需要对服务器进行压力测试,包括登录前的页面和登录后的页面,主要 ...

  2. COGS 栅格网络流

    750. 栅格网络流 http://www.cogs.pro/cogs/problem/problem.php?pid=750 ★★☆   输入文件:flowa.in   输出文件:flowa.out ...

  3. Redis学习七:Redis的持久化-总结(Which one)

    1.官网建议 2.RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储 3.AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些 命令来恢复原始的数据,AOF命令以red ...

  4. CSS3实战之多列

    CSS2中如果要设计多列布局,常用的方法有浮动和定位,但是浮动容易错位,定位无法满足模块的自适应能力,以及模块之间的文档流联动的需要.为了解决多列布局的难题,CSS3新增了多列自动布局功能. 利用多列 ...

  5. Java压缩/解压.zip、.tar.gz、.tar.bz2(支持中文)

    本文介绍Java压缩/解压.zip..tar.gz..tar.bz2的方式. 对于zip文件:使用java.util.zip.ZipEntry 和 java.util.zip.ZipFile,通过设置 ...

  6. JavaScript语法对{}的奇葩处理

    JavaScript的语法有多坑,算是众人皆知了. 今天看到vczh的这条微博:http://weibo.com/1916825084/B7qUFpOKb , 代码如下: {} + []; [] + ...

  7. 20155224 2016-2017-2 《Java程序设计》第7周学习总结

    20155224 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 标准API的函数接口 Consumer接口:接受一个自变量,处理不返回值. Fun ...

  8. Vue 表格内容根据后台返回状态位填充文字

    本文地址:http://www.cnblogs.com/veinyin/p/8534365.html  Vue 做表格时我们常用的就是 v-for ,直接把 prop 绑定上去,但是如果表格内容需要我 ...

  9. C++中全排列函数next_permutation用法

    最近做了TjuOj上关于全排列的几个题,室友告诉了一个非常好用的函数,谷歌之,整理如下: next_permutation函数 组合数学中经常用到排列,这里介绍一个计算序列全排列的函数:next_pe ...

  10. 【leetcode 简单】 第九十四题 左叶子之和

    计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 # Definition for a binary ...