用JS操作，body元素的scrollTop

var getTop = document.getElementById("get-top");

var head = document.getElementById("head");

getTop.onclick = function () {

    var time = setInterval(function () {

        document.body.scrollTop = document.body.scrollTop - ;

        if (document.body.scrollTop === ) {

            clearInterval(time);

        }

    }, );

};

下面不确定，网上找的没实验;

$(window).scroll(function(){

    if ($(window).scrollTop()>){

        $("#backTop").fadeIn();

    }

    else

    {

        $("#backTop").fadeOut();

    }

    });

    //当点击跳转链接后，回到页面顶部位置

    $("#backTop").click(function(){

        $('body,html').animate({scrollTop:},);

        return false;

    });

});

点击页面回到底部或者指定位置：

//  $(window).scroll(function () {

//    var scrollTop = $(this).scrollTop();

//    var scrollHeight = $(document).height();

//    var windowHeight = $(this).height();

//    console.log(scrollTop+','+scrollHeight+','+windowHeight)

//    if ((scrollTop + windowHeight) / scrollHeight > 0.99) {

//      $("#callMe").css("display", 'none')

//    } else {

//      $("#callMe").css("display", 'block')

//    }

//  });

$(".order").click(function(){

  var height=document.body.offsetHeight;

//  $(window).scrollTop(height,3000);

  $('html,body').animate({scrollTop: height}, )

})

滚动到顶部：

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, );});

滚动到指定位置：

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, );});

完整事例：

<!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-Type" content="text/html; charset=utf-8" />

<title>js平滑滚动到顶部、底部、指定地方</title>

<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>

<style>

 .box{ height:200px; width:%; background:#ccc; margin:10px ;}

 .location{ position:fixed; right:; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#};

</style>

</head>

<body>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box bottom"></div>

<div class="location">

  <p class="scroll_top">返回顶部</p>

  <p class="scroll_a">产品介绍</p>

  <p class="scroll_bottom">滑到底部</p>

</div>

<script type="text/javascript">

 jQuery(document).ready(function($){

  $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, );});

  $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, );});

  $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, );});

 });

</script>

</body>

</html>

scrollTop如何实现click后页面过渡滚动到顶部的更多相关文章

  1. css3如何实现click后页面过渡滚动到顶部

    var getTop = document.getElementById("get-top"); var head = document.getElementById(" ...

  2. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  3. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  4. WebForm 回传后如何保持页面的滚动位置

    转载自 http://www.cnblogs.com/renjuwht/archive/2009/06/17/1505000.html 默认情况下,ASP.NET页面回传到服务器后,页面会跳回顶部.对 ...

  5. input禁止输入后，触发事件，在苹果手机的页面会滚动

    在vue中,<input type="text" readonly="readonly" @click=""/>,点击跳转页面. ...

  6. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...

  7. h5页面弹窗滚动穿透的思考

    可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <!-- 弹窗模块 引用时移除static_tip类--> <div class="ma ...

  8. 简易页面场景滚动的jquery插件

    (function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_ ...

  9. 跳出弹窗页面禁止滚动（PC端和手机端）

    pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹 ...

随机推荐

  1. mongodb数据库分片实现链接

    http://www.lanceyan.com/tech/arch/mongodb_shard1.html

  2. 牛客练习赛42A（字符串）

    传送门 结论是:一定是选取最长的那个AB连续子串. 把题面要求的a*b + a + b转化一下成(a + 1)*(b + 1) - 1,即可发现如果选取前缀后缀不连续的两段作为答案,则显然有更优解,即 ...

  3. DB2 函数

    1.大小写转换 转大写UPPER 转小写LOWER

  4. 093 Restore IP Addresses 复原IP地址

    给定一个只包含数字的字符串,复原它并返回所有可能的IP地址格式.例如:给定 "25525511135",返回 ["255.255.11.135", " ...

  5. Mysql之Union用法

    在数据库中,UNION和UNION ALL关键字都是将两个结果集合并为一个,但这两者从使用和效率上来说都有所不同. MYSQL中的UNION UNION在进行表链接后会筛选掉重复的记录,所以在表链接后 ...

  6. nodejs express 设置html后缀模板

    express 框架的默认渲染模板的后缀是 ejs ,由于编译器在ejs的文件里写html代码没有高亮显示,所以使用html模板. 示例: var app = express(); app.set(' ...

  7. 我的NopCommerce之旅(7): 依赖注入(IOC/DI)

    一.基础介绍 依赖注入,Dependency Injection,权威解释及说明请自己查阅资料. 这里简单说一下常见使用:在mvc的controller的构造方法中定义参数,如ICountryServ ...

  8. nodejs 不是单线程

    nodejs 不是单线程 在我机器上,nodejs 起了近 20 个线程. 对,你没有看错,20个线程.

  9. Tame Your Software Dependencies for More Flexible Apps

    http://msdn.microsoft.com/en-us/magazine/cc337885.aspx

  10. (转)VIM 一键自动添加文件头注释

    通过修改VIM的配置文件.vimrc可以让Vim(gvim)支持自动添加作者信息,具体代码如下: "进行版权声明的设置 "添加或更新头 map <F4> :call T ...