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)







  • 相关阅读:
    【转】Yii的url美化管理
    【转】通过文件锁实现,程序开始运行时,先判断文件是否存在,若存在则表明该程序已经在运行了,如果不存在就用open函数创建该文件,程序退出时关闭文件并删除文件
    【转】关于C execlp函数的理解
    【转】shell循环,判断介绍,以及实例
    【转】Yii framework config 可以被配置的项目
    高级着色语言HLSL入门(7)
    c++中的string用法
    关于链表的创建 代码
    c++笔试题汇总
    TCP Socket编程 C/C++实现 (Windows Platform SDK)
  • 原文地址:https://www.cnblogs.com/pascal1000/p/12923249.html
Copyright © 2011-2022 走看看