html垂直自动滚动与JavaScript

时间:2013-04-05 14:14:43

标签: javascript html codeigniter scroll scrollbar

我是新的纯javascript(我发现它易于使用jquery,但它太糟糕了我不能在这种情况下使用jquery:D)。

我尝试按照sample code进行操作,但它无法在我的网站上使用。

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

enter image description here

因此,此页面分为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

3 个答案:

答案 0 :(得分:1)

的jQuery

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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