如何自动滚动元素

How to scroll element automatically?

本文关键字：元素 滚动 何自动      更新时间：2024-03-06

我正在尝试创建一个幻灯片放映项目

http://jsfiddle.net/L73T5/8/

用户可以滚动幻灯片内容，当他们向下滚动时，以前的幻灯片内容将隐藏在幻灯片图像后面（这一部分已经完成）

但是，当用户单击顶部的幻灯片图像时，我希望我的slide-content-containter跳转与幻灯片内容相对应。

例如，如果用户单击slide2，我希望在我的4张幻灯片图像下看到slide2内容，slide1内容将自动滚动到顶部并隐藏在4张幻灯片图片后面。

我开始写我的剧本，但不知道该怎么做。有人能帮我吗？我真的很感激！

Id必须是唯一的！你多次使用相同的id。

试试这个代码，

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">     </script>
 </script>
 <script>
    $(document).ready(function () {
        $('.slide').on('click', function (e) {
            e.preventDefault();
            var id = $(this).attr("id");
            goToByScroll(id);
        })
        function goToByScroll(id) {
            id = id + "Detail";
            var TopPosition = $("#" + id).position().top;
            $("#slide-content-container").animate({ scrollTop: TopPosition });
        }
    });
</script>
<style>
    #slide-list-container
    {
        float: left;
        width: 100%;
        overflow: hidden;
        margin-top: 10px;
    }

    #slide-content-container
    {
        width: 680px;
        height: 865px;
        float: left;
        overflow: auto;
        background-color: white;
    }
</style>
</head>
<body>
 <div id='slide-list-container'>
    <a id='slide1' class='slide' href='#slide1-details'>
        <img src='http://i39.tinypic.com/1zfsnrb.jpg' />
    </a><a id='slide2' class='slide' href='#slide1-details'>
        <img src='http://i39.tinypic.com/1zfsnrb.jpg' />
    </a><a id='slide3' class='slide' href='#slide1-details'>
        <img src='http://i39.tinypic.com/1zfsnrb.jpg' />
    </a><a id='slide4' class='slide' href='#slide1-details'>
        <img src='http://i39.tinypic.com/1zfsnrb.jpg' />
    </a>
</div>
<div id='slide-content-container'>
    <div id='slide1Detail'>
        <h1>
            Slide1</h1>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
        eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
        pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
        venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
        Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
        leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
        dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
        eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
        sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
        nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
        Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
        fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
        eget bibendum sodales, augue velit cursus nunc,</div>
    <div id='slide2Detail'>
        <h1>
            Slide2</h1>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
        eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
        pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
        venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
        Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
        leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
        dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
        eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
        sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
        nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
        Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
        fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
        eget bibendum sodales, augue velit cursus nunc,</div>
    <div id='slide3Detail'>
        <h1>
            Slide3</h1>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
        eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
        pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
        venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
        Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
        leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
        dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
        eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
        sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
        nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
        Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
        fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
        eget bibendum sodales, augue velit cursus nunc,</div>
    <div id='slide4Detail'>
        <h1>
            Slide4</h1>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
        eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
        pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
        venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
        Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
        leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
        dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
        laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
        ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
        eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
        sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas
        nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
        Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
        fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
        eget bibendum sodales, augue velit cursus nunc,</div>
</div>
</body>
</html>
相关文章：