用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. [arc063]F.すぬけ君の塗り絵2

    因为这题考虑可以观察一个性质,答案的下界为 \(2×(max(w,h)+1)\), 因为你至少可以空出一行或一列,因此这个矩形一定会经过 \(x=\frac{w}{2}\) 或 \(y=\frac{h ...

  2. 2个rman自动恢复的脚本

    ### scripts 1--the scirpt is used for restore db from vcs to a point to time recovery--and the targe ...

  3. java线性表之顺序表实现

    仿照arrayList写了一个简化版的线性表,主要为了用来研究arrayList在实现什么操作的情况下比较节省性能,楼主文采很差,直接上代码. import java.util.Arrays; pub ...

  4. C# readonly和const的区别

    什么是静态常量(Const)和动态常量(Readonly) 先解释下什么是静态常量(Const)以及什么是动态常量(Readonly). 静态常量(Const)是指编译器在编译时候会对常量进行解析,并 ...

  5. Ionic之button标签ng-click无反应解决

    在使用Ionic中,使用按钮的ng-click事件,竟然点击没有反应,刚开始以为自己写得方法有问题才会不起作用,自己在点击之后就console.log()一个东西,但是console也是无法反应的.& ...

  6. 修改Magento默认Export Customers功能

    Magento 1.x的Export功能可以很方便地对Customers的数据进行导出,但是存在几个不足(或者说不方便)的地方: 1. 默认导出的 .CSV文件是以UTF-8格式编码的,而MS Exc ...

  7. CSS元素隐藏的display和visibility

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...

  8. git 设置了ssh key 还是需要输入账户和密码

    参考这篇文章https://blog.csdn.net/shahuhu000/article/details/86625987 git remote remove origingit remote a ...

  9. sqlite的应用

    对于Android平台来说,系统内置了丰富的API来供开发人员操作SQLite,我们可以轻松的完成对数据的存取.下面就向大家介绍一下SQLite常用的操作方法.本篇文章主要用到SQLiteDataba ...

  10. IOS命名

    NS开头的名称不要出现. NS系统名称开头. 命名缩写只用于通用专业术语,如URL,不可自创命名缩写,如Ctr.Msg.命名宁可长一些,也不要难于理解. 是否在看别人代码时各种缩写而不知其所以然?简短 ...