[js常用]页面滚动的顶部,指定位置或底部,平滑滚动

番茄西红柿发布于2019-04-23 13:08 / 2427人阅读

摘要：平滑滚动到顶部底部指定地方平滑滚动到顶部底部指定地方这部分是产品介绍这部分是产品介绍这部分是产品介绍这部分是产品介绍这部分是产品介绍返回顶部产品介绍滑到底部

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>

GPU云服务器云服务器滚动到指定位置 js平滑滚动视图平滑滚动 js 设置页面滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1481.html

scrollIntoView 与平滑滚动

摘要：默认值为，表示立刻滚到底即表示平滑滚动。这时对锚点内链触发的视口滚动同样有效。它接受两种形式的值布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动老版的浏览器。表示行内元素排列方向要滚动到的位置。经常有这样的需求：点击一个链接（内链）跳转到当前页面中间某个部分。对于这样的需求，很容易想到使用锚点实现。但有一个问题：滚动一步到位，太生硬了。我还是比较喜欢平滑滚动。HTML5 中提...

darkbug 2019-08-22 13:49 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

layman 2019-08-29 17:08 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

littlelightss 2019-08-23 12:36 评论0 收藏0
DOM知识整理

摘要：继承接口对象不仅实现了接口，也实现了接口，用来标识当前窗口内的文档节点。继承接口描述了所有相同种类的元素所普遍具有的方法和属性。由于工作中一直在用框架来解决问题，在平时对dom的关注也比较少（特别像angular这种自己封装了一层视图层的框架，并不建议直接操作DOM），所以dom相关的知识也忘的差不多了,这次做公司产品的官网，没有太多的交互和功能，直接用了原生js，正好借此整理一下遗...

huayeluoliuhen 2019-08-23 13:51 评论0 收藏0
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

摘要：三底部选项卡切换页面底部选项卡的切换，可以说是的标志之一。两种模式的显示效果差不多，如下图可见两种模式的区别顾名思义，模式是将所有子页面的内容，分别放置到主页不同的中，当我们点击主页的不同选项卡时，切换不同的显示。概述 JRedu 　　在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http...

番茄西红柿 2019-04-23 13:37 评论0 收藏0