JQuery在单击相应元素时平滑滚动到一个元素
我希望能够在两个元素之间平滑滚动。我一直在使用这个脚本在链接和锚之间滚动。我希望重新使用这个脚本,允许根据每个元素的“id”的一部分平滑滚动不同的元素类型JQuery在单击相应元素时平滑滚动到一个元素,jquery,scrolltop,Jquery,Scrolltop,我希望能够在两个元素之间平滑滚动。我一直在使用这个脚本在链接和锚之间滚动。我希望重新使用这个脚本,允许根据每个元素的“id”的一部分平滑滚动不同的元素类型 这是原始脚本 -见下文 $(document).ready(function(e) { //SCROLL TO ANCHOR TAG var $root = $('html, body'); $('a').click(function() { $root.animate({
这是原始脚本 -见下文
$(document).ready(function(e) {
//SCROLL TO ANCHOR TAG
var $root = $('html, body');
$('a').click(function() {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
});
我现在就在这里 我想修改脚本,使其在单击
span
或div
然后滚动到具有设置id的ali
之间工作:
<ul>
<li id="1">frame 1 - <span id="goto2" class="goto">go to frame 2</span></li>
<li id="2">frame 2 - <span id="goto3" class="goto">go to frame 3</span></li>
<li id="3">frame 3 - <span id="goto4" class="goto">go to frame 4</span></li>
<li id="4">frame 4 - <span id="goto5" class="goto">go to frame 5</span></li>
<li id="5">frame 5 - <span id="goto1" class="goto">go to frame 1</span></li>
</ul>
我不知道如何设置scrollTop在span
到li
之间工作,并使用相应的id。我保留了scrollTop行,与原始脚本中的一样
任何帮助都将不胜感激
谢谢这里是html
<ul>
<li id="li1">frame 1 - <span id="goto2" class="goto">go to frame 2</span></li>
<li id="li2">frame 2 - <span id="goto3" class="goto">go to frame 3</span></li>
<li id="li3">frame 3 - <span id="goto4" class="goto">go to frame 4</span></li>
<li id="li4">frame 4 - <span id="goto5" class="goto">go to frame 5</span></li>
<li id="li5">frame 5 - <span id="goto1" class="goto">go to frame 1</span></li>
</ul>
<div id="1">1</div><div id="2">2</div><div id="3">3</div><div id="4">4</div><div id="5">5</div>
这是固定的JS
$(document).ready(function(e) {
//SCROLL TO ANCHOR TAG
var $root = $('html, body');
$('.goto').click(function() {
var $gotoid = $(this).prop('id');
var $justid = $gotoid.replace('goto','');
console.log($gotoid);
console.log($justid);
if(typeof $("#"+$justid) != undefined){ // test if target exists
$root.animate({
scrollTop: $("#"+$justid).offset().top
}, 2000);
}
return false;
});
});
然后,小提琴
请随意询问解释首先,这是不正确的
var$gotoid=$('.goto').attr('id')代码>$('.goto')将返回一个数组。您正在尝试获取数组的Id
。
div{
height:600px;
background-color:#aaa;
margin-top:20px;
}
$(document).ready(function(e) {
//SCROLL TO ANCHOR TAG
var $root = $('html, body');
$('.goto').click(function() {
var $gotoid = $(this).prop('id');
var $justid = $gotoid.replace('goto','');
console.log($gotoid);
console.log($justid);
if(typeof $("#"+$justid) != undefined){ // test if target exists
$root.animate({
scrollTop: $("#"+$justid).offset().top
}, 2000);
}
return false;
});
});