Question

我想在这个网站上创建类似的内容

http://www.bombardier.com/en/aerospace/business-aircraft.html

当您滚动某个点上的链接停止时，当您单击任何一个链接时，它会转到目标div上，当您滚动它时，链接会在目标div上滚动时激活。

是否有jquery插件？

谢谢！

Answer 1

试试这个fiddle

            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul id="menu-header-menu" class="">
                <li id="menu-item-14" class=" menu-item-14"><a href="#About">About</a></li>
                <li id="menu-item-15" class=" menu-item-15"><a href="#Mission">Mission</a></li>
                <li id="menu-item-16" class=" menu-item-16 active"><a href="#service">Services</a></li>
                <li id="menu-item-17" class=" menu-item-17"><a href="#team">Team</a></li>
                <li id="menu-item-18" class=" menu-item-18"><a href="#community">community</a></li>
            </ul>
            </div>

            <div class="" id="About">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  
            </div>
            <div class="" id="Mission">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            <div class="" id="service">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="" id="team">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="" id="community">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>


            <script>
            $(document).on('click', 'a[href^="#"]', function(e) {
                var id = $(this).attr('href');
                var $id = $(id);
                if ($id.size() === 0) {
                    return;
                }
                e.preventDefault();
                var pos = $(id).offset().top;
                pos = pos-95;   
                $('body, html').animate({scrollTop: pos});
            });

            </script>

Answer 2

您可以使用以下代码执行此操作：

HTML

这将作为菜单

<a href="javascript:void(0)" class="scroll-bottom" data-scrolltarget="#target_div_id1">section 1</a>
<a href="javascript:void(0)" class="scroll-bottom" data-scrolltarget="#target_div_id2">section 2</a>
<a href="javascript:void(0)" class="scroll-bottom" data-scrolltarget="#target_div_id3">section 2</a>

这是你的Container div

<div id="target_div_id1"> ....Section 1 Description...  </div>
<div id="target_div_id2"> ....Section 2 Description...  </div>
<div id="target_div_id3"> ....Section 3 Description...  </div>

现在添加一个Magic JQuery代码

$(".scroll-bottom").click(function() {
    var toid = $(this).data('scrolltarget');
    $('html, body').animate({
        scrollTop: $(toid).offset().top - 45
    }, 1000);
});

我希望这有效

Answer 3

这可以在没有插件的情况下完成，只需jquery。

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

不确定我为什么被投票。这是一个例子。这是最简单的答案。 jsfiddle

jquery插件，用于某个点上的div停止

3 个答案: