html垂直自动滚动与JavaScript

Question

我是新的纯javascript （我发现它易于使用jquery ，但它太糟糕了我不能在这种情况下使用jquery ：D）。

我试着按照这个示例代码，但它不能在我的网站上运行。

这是我的网页的屏幕截图和解释：

在此输入图像描述

因此，此页面分为2个不同的html文件，一个用于标题及其jquery选项卡，另一个用于标签下方的内容。

我的计划是让jquery选项卡下面的内容可滚动，因此以下代码来自我的内容的html（ 在jquery选项卡下面 ）：

<body>
    <script type="javascript">
        function top() {
        document.getElementById( 'top' ).scrollIntoView();    
    };

    function bottom() {
        document.getElementById( 'bottom' ).scrollIntoView();
        window.setTimeout( function () { top(); }, 2000 );
    };

    bottom();
</script>

<div id="form_search">
    <div id="top">top</div>
    <?php echo form_open('backend/index') ?>
        <p>
        Kelas :
        <?php echo form_dropdown('ddl_kelas1', $list_kelas, 'id="ddl_kelas1"');?> -
        <?php echo form_dropdown('ddl_kelas2', $list_kelas, 'id="ddl_kelas2"');?>
        </p>
        <p>
        Nama : <?php echo form_input('txt_nama');?>
        Alamat : <?php echo form_input('txt_alamat');?>
        Tanggal Lahir : <input type="text" id="datepicker" />
        </p>
        <?php echo form_submit('btn_search', 'Search');?>
    <?php echo form_close(); ?>
</div>
<div>
    <?php echo $table ?>
    <?php echo $pagination ?>
    <div id="bottom">bottom</div>
</div>

请注意，顶部和底部div仅用于页面限制（我按照上面的示例代码）。 我尝试过另一种方法，比如更改用于限制的id /元素，但它仍然无效。

谢谢你的帮助：D

注意：我在这个项目中使用codeigniter框架：D

Answer 1

jQuery的

$("html, body").animate({ scrollTop: $('#bottom').offset().top }, 2000);

      ^                                    ^                        ^
What to scroll ---------------------- to which element --------- duration

Answer 2

在html屏幕的底部似乎有很多额外的东西。 我把它拿出来并调整了一些javascript。 但是拿出额外的东西已经成功了......

// extra stuff starting at line 332

    <script>

        /* by: thinkingstiff.com
        license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */

            var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-555555-6']);
        // more stuff

http://jsfiddle.net/djwave28/pA9QZ/3/

Answer 3

似乎用户问题的解决方案是简单地添加overflow-y:scroll到用于放置内容的div标签的css。 简单解决方案

html垂直自动滚动与JavaScript

问题描述

3 个解决方案

解决方案1
1 2013-04-05 14:36:33

jQuery的

解决方案2
1 2013-04-05 14:42:26

解决方案3
1 已采纳 2013-04-05 15:18:33

html垂直自动滚动与JavaScript

问题描述

3 个解决方案

解决方案1 1 2013-04-05 14:36:33

jQuery的

解决方案2 1 2013-04-05 14:42:26

解决方案3 1 已采纳 2013-04-05 15:18:33

解决方案1
1 2013-04-05 14:36:33

解决方案2
1 2013-04-05 14:42:26

解决方案3
1 已采纳 2013-04-05 15:18:33