用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. [Usaco2011 Dec]Grass Planting

    Description Farmer John has N barren pastures connected by N-1 bidirectional roads, such that there ...

  2. PAT甲级——1134 Vertex Cover （25 分)

    1134 Vertex Cover (考察散列查找,比较水~) 我先在CSDN上发布的该文章,排版稍好https://blog.csdn.net/weixin_44385565/article/det ...

  3. morphia(5)-删除

    @Test public void delete() throws Exception { final Query<Employee> query = datastore.createQu ...

  4. Spark Mllib里如何将预测结果如0或1，转换为文字描述来显示预测结果输出（图文详解）

    不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第13章 使用决策树二元分类算法来预测分类StumbleUpon数据集

  5. 我的NopCommerce之旅(3): 系统代码结构分析

    一.概述 基于MVC 二.详细描述 \Libraries\Nop.Core 核心类,包括缓存.事件.帮助类.业务对象(订单.客户实体) \Libraries\Nop.Data 数据访问层,采用Enti ...

  6. 代码review

    对于代码review个人也有些小小的看法: 1．首先我觉得我们所有开发人员要弄明白 现在Code Review 的目的 ,凡事不弄明白目的,无法做好完成一件事情,个人觉得有以下一些目的: a)可以在项 ...

  7. public private protected 三种访问修饰符在c#中的区别

    1. public 公有的可见性:在类自身内部可见: 可被子类继承: 类外部可见 2. protected 受保护的可见性:在类自身内部可见: 可被子类继承: 类外部不可见 3. private 私有 ...

  8. asp也玩三层架构(有源代码)

    实体类 <% Class UserInfo Private mintId Public Property Let UserId(intUserId) mintId = intUserId End ...

  9. webpack（1）

    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...

  10. mysql查询问题

    需求:根据选择不同的分类id,查找到同时属于选中的分类的文章id sql语句: select result,GROUP_CONCAT(category_id) from (select categor ...