用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. Jquery | 基础 | html()

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

  2. [题解]（tarjan割点/点双）luogu_P3225_矿场搭建

    首先和割点有关,求割点,然后这些割点应该把这个图分成了多个点双,可以考虑点双的缩点,假如缩点做的话我们要分析每个点双的性质和贡献 先拿出一个点双来,如果它没有连接着割点,那么至少要建两个,以防止其中一 ...

  3. 最短路之Dijkstra（单源）HDU 2544

    #include <iostream> using namespace std; ; ][]; ]; int middist; ]; void dijkstra(int n,int m) ...

  4. UWP 画一个圆形头像

    经常需要做一个圆形头像的样式,like this 做法很简单,直接上xaml. <Ellipse Width=" Height="> <Ellipse.Fill& ...

  5. TYVJ 2032 搜索

    P2032 「Poetize9」升降梯上 描述 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨 ...

  6. Java EE学习笔记（三）

    Spring AOP 1.Spring AOP简介 1).AOP的全称是Aspect-Oriented Programming,即面向切面编程(也称面向方面编程).它是面向对象编程(OOP)的一种补充 ...

  7. freertos之任务

    taskYIELD(): 通知调度器自己放弃运行态,可立即进行任务切换,而不必等到当前任务的时间片耗尽.这对于相同任务优先级的2个任务来说可加速效率.

  8. Bingding模型

    public abstract class Binding : IDefaultCommunicationTimeouts public virtual IChannelListener<TCh ...

  9. JavaScript中，关于class的调用

    PS:class的调用,其实是可以叠加的,当然了这要求样式不同的情况下,如果样式相同,则后一个样式会覆盖前一个样式. 1.举例如下: <div id="test" class ...

  10. 浅析document和window的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...