如何去页面上的特定元素？
在我的HTML页面上，我希望能够''滚动'/'关注'页面上的元素。
通常情况下，我会使用带有href="#something"的锚定标记，但是我已经使用hashchange事件以及BBQ插件来加载此页面。
那么有什么其他的方式，通过JavaScript，让页面转到页面上给定的元素？
以下是我想要做的事情的基本概述：
function focusOnElement(element_id) { $('#div_' + element_id).goTo(); // need to 'go to' this element } <div id="div_element1"> yadda yadda </div> <div id="div_element2"> blah blah </div> <span onclick="focusOnElement('element1');">Click here to go to element 1</span> <span onclick="focusOnElement('element2');">Click here to go to element 2</span>
插件forms的标准技术看起来像这样：
(function($) { $.fn.goTo = function() { $('html, body').animate({ scrollTop: $(this).offset().top + 'px' }, 'fast'); return this; // for chaining... } })(jQuery);
然后你可以说$('#div_element2').goTo(); 滚动到<div id="div_element2"> 。 选项处理和可configuration性是读者的一个练习。
如果该元素当前在页面上不可见，则可以使用本机scrollIntoView()方法。
$('#div_' + element_id)[0].scrollIntoView( true );
true表示alignment页面顶部， false表示alignment底部。
否则，您可以使用jQuery 的scrollTo()插件 。
或者，也许只是得到元素的top position() （docs） ，并将scrollTop() （docs）设置为该位置：
var top = $('#div_' + element_id).position().top; $(window).scrollTop( top );
document.getElementById("elementID").scrollIntoView();
同样的事情，但包装在一个函数：
function scrollIntoView(eleID) { var e = document.getElementById(eleID); if (!!e && e.scrollIntoView) { e.scrollIntoView(); } }
这甚至可以在iPhone上的IFrame中工作。
使用getElementById的示例： http : //www.w3schools.com/jsref/tryit.asp? filename = tryjsref_document_getelementbyid
这里是一个简单的JavaScript的
当你需要将屏幕滚动到id =“yourSpecificElementId”的元素时调用它
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));
你需要这个工作的function：
//Finds y value of given object function findPos(obj) { var curtop = 0; if (obj.offsetParent) { do { curtop += obj.offsetTop; } while (obj = obj.offsetParent); return [curtop]; } }
屏幕将滚动到您的特定元素。
要滚动到页面上的特定元素 ，可以在jQuery(document).ready(function($){...})添加一个函数，如下所示：
$("#fromTHIS").click(function () { $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500); return true; });
它在所有浏览器中都很有魅力。 根据您的需要调整速度。
