如何使用jquery滚动到具有动态id的元素

How to scroll to an element which has dynamic id using jquery

本文关键字：动态 id 元素 何使用 jquery 滚动      更新时间：2023-09-26

我已经以静态的方式完成了这个功能，但我如何使用jquery进行滚动，以便它能够平滑地滚动到我动态添加的特定元素。

var data = [{"name": "Aruba", "code": "A"},{"name": "AndorrA", "code": "A"},{"name": "Bhutan", "code": "B"},{"name": "Bolivia", "code": "B"}]
var num=0;
$.each(data, function(key, val) {
    if (!$("#aZContent ul." + val.code).is("*")) {
	    $("<ul />", {"class": val.code,"html": "<li>"+ val.name + "</li>"}).appendTo("#aZContent").before('<b class=' + val.code + ' id="letter_' + num++ + '">' + val.code + '</a></b>');
	} else {
		$("b." + val.code).each(function() {
		    if (this.textContent === val.code) {
				$(this).next("ul").append("<li>" + val.name + "</li>");
			}
	    });
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="alphabet" id="alphaTab">
	<a href="#letter_0">A</a>
	<a href="#letter_1">B</a>	
</div>		
<div id="aZContent">
	<ul></ul>
</div>
<div style="height:500px"></div>

点击链接"A"时，它应该滚动到"A"，同样也是

在我的应用程序中，我有一个按钮，每次单击按钮时都会将表单字段集附加到正文中——我想将页面向下滚动到新元素，但由于jQuery滚动功能的冒泡和事件绑定限制，这没有起作用。我想出了一个简单的解决办法。。。

function scroll(pixels){
    $('html, body').animate({
        scrollTop: pixels
    }, 1000);
};
function addObservation(x){
    $('body').append(x);
    newFieldSet = $('fieldset').last();
    pixelsFromTop = newFieldSet.offset().top;
    scroll(pixelsFromTop);
};
$(document).on("click", "#add_observation", function(){
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>");
});

因此，每次添加字段集时，jQuery都会找到最后一个字段集，然后.offset().top测量字段集距离顶部的像素数，然后平滑地滚动窗口该距离。

我没有完全理解你的应用程序。但它应该很简单。

您说id是"动态的"，这意味着将动态生成元素和相应的按钮/链接。

现在你只需要做..

假设链路的calss是CCD_ 2。

jQuery(".linksy").on('click', function(){
  e.preventDefault();
  $id = jQuery(this).attr('href');
  $('body').scrollTo('#' + $id);
});
相关文章：