zoukankan      html  css  js  c++  java
  • 控制页面的滚动条

    1. 控制页面滚动条,跳到页面底部

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery.min.js"></script>
    <script>
    $(function(){
    $('#toBottom').on("click", function(){
    var bottom = $("#bottom", window.document).offset().top
    console.log("bottom: " + bottom);
    $('html, body', window.document).stop().animate(
    {
    scrollTop: bottom
    }, 1000, function() {
    console.log("animate complete.")
    }
    );
    });
    $('#toBottom').trigger("click");
    });
    </script>
    </head>
    <body>

    <button id="toBottom" href="#bottom">click me jump to bottom</button>

    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>

    <div id="bottom"></div>
    </body>
    </html>


    2. 在iframe内部控制父页面滚动条滚到底部。
    2.1 parent.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <iframe name="iframe1" id="iframe1" width="100%" height="600" style="border: 0;"
    src="inner.html" >
    </iframe>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <p>out</p>
    <div id="bottom"></div>
    </body>
    </html>


    2.2 inner.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery.min.js"></script>
    <script>
    $(function(){
    $(document).on("BarToToped", function(){
    var bottom = $("#bottom", window.parent.document).offset().top
    console.log("bottom: " + bottom);
    $('html, body', window.parent.document).stop().animate(
    {
    scrollTop: bottom
    }, 1000, function() {
    console.log("animal complete.")
    }
    );
    });
    $(document).trigger("BarToToped");
            });
    </script>
    </head>
    <body>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    <p> inner</p>
    </body>
    </html>


    3. 总结:

    3.1 滚动效果
    animate
    scrollTop

    3.2 事件绑定,触发事件
    $(document).on("BarToToped", function(){ ...})
    $(document).trigger("BarToToped");

    3.3 在iframe内部调用外部元素
    $("#bottom", window.parent.document)







  • 相关阅读:
    大数据应用期末总评
    分布式文件系统HDFS 练习
    安装Hadoop
    爬虫综合大作业
    爬取全部的校园新闻
    理解爬虫原理
    中文词频统计与词云生成
    复合数据类型,英文词频统计
    字符串操作、文件操作
    了解大数据的特点、来源与数据呈现方式
  • 原文地址:https://www.cnblogs.com/pascal1000/p/12923249.html
Copyright © 2011-2022 走看看