用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. Tyvj1474 打鼹鼠

    Description 在这个“打鼹鼠”的游戏中,鼹鼠会不时地从洞中钻出来,不过不会从洞口钻进去(鼹鼠真胆大……).洞口都在一个大小为n(n<=1024)的正方形中.这个正方形在一个平面直角坐标 ...

  2. 「开源」SpringCloud+vue搭建的商城项目

    最近在研究SpringCloud,看到一个基于SpringCloud+vue搭建的模拟商城项目.用来辅助学习SpringCloud企业级开发还是很有帮助的.强烈推荐!! 源码地址在最后. spring ...

  3. python的正则表达式支持（链接）

    http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html

  4. 根据select中选定option触发不同事件

    做公司项目,要实现一个小需求,根据下拉框选定的数据,绑定不同的事件.我的思路是获取select下面的option值,然后给它们定义不同的点击事件,但是在使用中option不能添加类,同时没有click ...

  5. __str__,__repr__,__format__

    __str__,__repr__ __str__:控制返回值,并且返回值必须是str类型,否则报错 __repr__:控制返回值并且返回值必须是str类型,否则报错 __repr__是__str__的 ...

  6. Retrofit实现Delete请求

    //设置取消关注 @Headers("Content-Type:application/x-www-form-urlencoded") @HTTP(method = "D ...

  7. java 美团面试常见问题总

    一 基础篇 1. System.out.println(3|9)输出什么? 2. 说一下转发(Forward)和重定向(Redirect)的区别 3. 在浏览器中输入url地址到显示主页的过程,整个过 ...

  8. wine使用

    wineqq 不能输入问题winecfg在 wine 设置里,选择函数库添加 riched20, 就行了(原装领先于内建) wineqq 可以输入不能输入中文问题原因:fictx组件缺失 搜狗输入法没 ...

  9. 双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

  10. sqlite总结1

    I Shell下命令行程序CLP I .help II 命令的简写 .e = .quit .s .h = .help II 数据库管理 A 创建数据库 1 CREATE TABLE id_name(i ...