js平滑滚动到顶部、底部、指定地方

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>

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

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

    </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>

</body>

</html>

<script type="text/javascript">

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

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

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

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

    });

</script>

[js常用]页面滚动的顶部,指定位置或底部,平滑滚动的更多相关文章

  1. 获取一个元素距离顶部的位置和window的滚动值

    获取一个元素距离顶部的位置: $(".box").offset().top; 获取window的滚动值: $(window).scrollTop();

  2. js刷新页面不回到顶部

    今天遇到刷新页面不回到顶部的需求 window.location.reload();方法已经解决了问题,但是ie8不支持,后来采用的是锚点这个方法 window.location = '/plan/g ...

  3. JS对象 charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

    返回指定位置的字符 charAt() 方法可返回指定位置的字符.返回的字符是长度为 1 的字符串. 语法: stringObject.charAt(index) 参数说明: 注意:1.字符串中第一个字 ...

  4. js 刷新页面自动回到顶部

    <script type="application/x-javascript"> addEventListener("load", function ...

  5. js中json的添加和指定位置的删除

    0]绑定数据 grid = $("#Grid").datagrid({ fit: true, rownumbers: true, fitColumns: true, height: ...

  6. ListBox滚动条 刷新列表之后 指定位置(置顶或滚动到最后)

    参数ObservableCollection<T>类型 滚动条在最上 ListBox.ScrollIntoView(ListBoxOC[0]);滚动条在最下 ListBox.ScrollI ...

  7. js 获取滚动位置，滚动到指定位置，平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

  8. js 动画滚动到指定位置 ES6

    ### 开始 ### 写一个自动滚动过度到指定位置的一个函数 通过Class进行封装 /** * 滚动动画过度 * @param {Object} position 定位(只支持Y轴) * @para ...

  9. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

随机推荐

  1. 初识MQ

    [参考文章]:到底什么时候该使用MQ? 1. 什么是MQ? 消息队列(Message Quene)是一种跨进程的通信机制,用于上下游传递消息. MQ是一种非常常见的上下游“逻辑解耦+物理解耦”的消息通 ...

  2. 【sping揭秘】2、关于spring配置文件

    <import>标签 引入其他的配置文件,如果A.xml 中的<bean>定义可能依赖B.xml中的某些<bean>定义,那么可以再A.xml中使用这种方式< ...

  3. 课程一(Neural Networks and Deep Learning)，第四周（Deep Neural Networks）—— 0.学习目标

    Understand the key computations underlying deep learning, use them to build and train deep neural ne ...

  4. C#：VS2010 由于缺少调试目标"xx.exe",Visual Studio无法开始调试,请生成项目并重试,或者相应地设置OutputPath和AssemblyName属性，使其指向目标程序集的正确位置

    解决办法:重置VS2010的环境配置 原文地址:曾是土木人 转载请注明出处:http://www.cnblogs.com/hongfei/p/3813369.html

  5. Mac 安装 Ruby, Rails 运行环境

    对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境. 次安装方法同样适用于产品环境! ...

  6. Your Mac is infected with (3) Viruses!

    记一次流氓程序的清理 某天我的电脑不幸感染了这么一个病毒

  7. 深入浅出zeptojs中tap事件

    1.tap事件实现 zepto 源码里面看关于tap的实现方法: $(document).ready(function(){ var now, delta, deltaX = 0, deltaY = ...

  8. filebeat-2-通过kafka队列链接logstash

    filebeat 直接到logstash, 由于logstash的设计问题, 可能会出现阻塞问题, 因为中间使用消息队列分开 可以使用redis, 或者kafka, 这儿使用的是kafka 1, 安装 ...

  9. JDK7与JDK8中HashMap的实现

    JDK7中的HashMap HashMap底层维护一个数组,数组中的每一项都是一个Entry transient Entry<K,V>[] table; 我们向 HashMap 中所放置的 ...

  10. 每天一个linux命令（目录）

    转:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html 开始详细系统的学习linux常用命令,坚持每天一个命令,所以这个系列为每天 ...