logo标签列表

使用jQuery将锚链接到多个类而不是ID。

javascriptjqueryhtmlcss
4
我有一个页面，其中的上下箭头是悬浮在左侧的链接。我希望它们能像锚点链接一样在不同的 div 之间导航。这是我目前的代码......我知道 jQuery 还远没有完成，但我认为我正在正确的方向上前进。任何帮助都将非常感谢。
JSFIDDLE: http://jsfiddle.net/t8uaQ/ HTML:
<ul id="et-float-menu">
   <li class="et-float-menu-item1">
       <a href="#scroll"> <span><img></span> </a>
   </li>
   <li class="et-float-menu-item2">
       <a href="#scroll"> <span><img></span> </a>
   </li>
</ul>     
<div class="jumptosection" id="section1">
   <h2>Section 1</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

   <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section2">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section3">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section4">
    <h2>Section 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>

我的 CSS：

#section1 {
  padding:20px;
  margin:10px;
  background-color:#f8f8f8;
}

#section2 {
  padding:20px;
  margin:10px;
  background-color:#e8e8e8;
}

#section3 {
  padding:20px;
  margin:10px;
  background-color:#f8f8f8;
}

#section4 {
  padding:20px;
  margin:10px;
  background-color:#e8e8e8;
}

#et-float-menu {
  position: fixed;
  z-index: 11;
  left: 0;
  top: 45%;
  background-color: #000;
  padding: 20px 10px 10px 15px;
  margin: 0;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

#et-float-menu a {
  padding: 0;
  clear: both;
  float: left;
  margin-bottom: 10px;
  color: #fff;
}

#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }

#et-float-menu li {
  display: block;
  margin-left: 0;
}


.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }

JQUERY:

jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
    jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
    return false;
});
});
2
你将href设置为#scroll，但没有元素设置id为scroll。此外，如果这是一个打字错误，你不能有多个元素具有相同的id。 - Patrick Evans
2个回答
6

将您的href更改为相应的scrollUp和scrollDown。

坚持使用一些.selected类，用于标识当前选定的部分。 将此类添加到html中的第一节。

添加一个函数来执行选择：通过添加.selected类并滚动到新选择的div。

function changeSelection(sectionFrom, sectionTo) {
    if(sectionTo.length > 0) {
        sectionFrom.removeClass("selected");
        sectionTo.addClass("selected");
        $("body").animate({scrollTop: sectionTo.offset().top});
    }
}

给你的锚点添加click监听器。在每个监听器中找到当前已选中的div和要被选中的div，并使用这些div调用changeSelection()。

对于scrollDown，我们希望选择下一个div：

$(document).on("click", "[href='#scrollDown']", function(){
    var currentSection = $(".selected");
    var nextSection = currentSection.next(".jumptosection");

    changeSelection(currentSection, nextSection);

    return false;
});

针对 scrollUp，我们希望能够 选择 前一个 div:
$(document).on("click", "[href='#scrollUp']", function(){
    var currentSection = $(".selected");
    var prevSection = currentSection.prev(".jumptosection");

    changeSelection(currentSection, prevSection);

    return false;
});

如果你到达了最后一个或第一个 .jumptosection div，则不会发生任何改变（这由 changeSelection 函数控制 - 它检查我们是否有想要滚动到的 sectionWeWantScrollTo ）。

这里是演示

编辑（用于http://94co.com/client3/about/）

  1. See this answer about WordPress and jQuery. Use jQuery instead of $ in your script
  2. It is better to use id instead of href on anchor

  3. Make sure you wrap JavaScript of click listeners in

    jQuery(document).ready(function(){
     /*scrollUp and scrollDown click listeners should be here*/
});

    (JSFiddle makes this wrap automatically). changeSelection function doesn't need to be wrapped

Here is the updated Demo

演示工作得非常完美...再次感谢。如果您有时间，可以在此处查看：http://94co.com/client3/about/ 看起来由于某些原因它似乎无法正常工作，但所有的代码都在源代码中。 - David Coggins
将监听器包装在 $(document).ready(function(){/*listeners are here*/}); 中。 - n1k1ch
此外，使用 jQuery 代替 $ （详情请参见这里）。 - n1k1ch
1
你可以设置一些初始的“var”来确定起点，如下所示：
var pre = $('.et-float-menu-item1'),
    nex = $('.et-float-menu-item2'),
    act = $('#section1');

这里的“act”是起始位置

然后评估prev和next元素：

nex.click(function(){
    pre.slideDown();
    var gt = act.next('div').offset().top;
    $('body').animate({scrollTop : gt},'slow');
    act = act.next('div');
})
pre.click(function(){
    var gt = act.prev('div').offset().top;
    $('body').animate({scrollTop : gt},'slow');
    act = act.prev('div');
})

这段代码可以改进，但这是我能提供的第一个方法。
请查看演示Fiddle。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接