我有一个带有向上和向下箭头的页面，这些箭头是浮动在左侧的链接。我希望他们在页面上的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;
});
});
答案 0 :(得分：6)
相应地将href的{{1}}更改为<a>和scrollUp。
坚持使用一些scrollDown类，它将用于识别当前选定的部分。
将此类添加到html的第一部分。
添加一个将执行选择的功能：添加.selected类并滚动到新选择的.selected。
div将function changeSelection(sectionFrom, sectionTo) {
if(sectionTo.length > 0) {
sectionFrom.removeClass("selected");
sectionTo.addClass("selected");
$("body").animate({scrollTop: sectionTo.offset().top});
}
}
个听众附加到您的click。在每个内部找到当前选定的anchor和div您想要选择并使用这些div拨打changeSelection()。
对于div，我们希望选择下一个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函数控制 - 它检查我们有<强> sectionWeWantScrollTo ）
changeSelection代替
脚本中的jQuery $ id代替href
确保在
中包装anchor个侦听器的JavaScript
click（JSFiddle自动进行此换行）。 jQuery(document).ready(function(){
/*scrollUp and scrollDown click listeners should be here*/
});
函数不需要包装
答案 1 :(得分：1)
您可以设置一些初始var，让您知道这样的起点：
var pre = $('.et-float-menu-item1'),
nex = $('.et-float-menu-item2'),
act = $('#section1');
行为是开始
然后评估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');
})
这段代码可以改进，但这是我能给予的第一个方法。
检查 Demo Fiddle