我有一个不同部分的网站。我有jQuery在这些部分之间滑动。 但现在我在一个指向另一部分的部分中有一个链接。
HTML :
<div class="section" id="one">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
</div>
</div>
<div class="section" id="tow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
</div>
</div>
<div class="section" id="ordernow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
</div>
</div>
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
</div>
</div>
jQuery的:
// onclick on an object with class "section" scroll to this object
$('div.section').click(function() {
$.scrollTo($(this), 800);
});
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
}
问题在于,如果我点击链接scrollOrderNow()
,页面会滑到订单页面,而不是返回到该部分,因为该链接位于该部分。
你能帮我解决这个问题吗?
谢谢!
答案 0 :(得分:0)
您需要将return false
放入scrollOrderNow()
功能。
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
return false;
}
这样,您的链接就不会做出反应,并且哈希不会附加到网址上,而是将网页留在原来的位置。
答案 1 :(得分:0)
您可以使用单击处理程序,并根据在该部分中单击的元素确定要执行的操作。为此,最好通过给它一个类来区分可点击元素:
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<a href="#"><img src="button" class="scroll-to-order"/></a>
</div>
</div>
点击处理程序代码:
$('div.section').on('click', function(evt) {
var $target = $(evt.target);
if ($target.is('.scroll-to-order')) {
// the image itself was clicked, so scroll to ordernow
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
} else {
// something else inside the section was clicked, scroll to section
$.scrollTo($(this), 800);
}
});