Question

在我的HTML页面上，我希望能够'转到'/'滚动到'/'专注于'页面上的元素。

通常，我会使用带有href="#something"的锚标记，但我已经使用hashchange事件和BBQ plugin加载此页面。

有没有其他方法，通过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>

Answer 1

如果页面上当前不显示该元素，则可以使用原生scrollIntoView()方法。

$('#div_' + element_id)[0].scrollIntoView( true );

true表示与页面顶部对齐，false与底部对齐。

否则，你可以使用jQuery a scrollTo() plugin。

或者只是获取元素的top position()^(docs)，并将scrollTop()^(docs)设置为该位置：

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );

Answer 2

插件形式的标准技术看起来像这样：

(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">。选项处理和可配置性留给读者练习。

Answer 3

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

Answer 4

这是一个简单的javascript

当您需要将屏幕滚动到具有id =“yourSpecificElementId”

的元素时，请调用此方法

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

你需要这个功能才能正常工作：

//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];
    }
}

屏幕将滚动到您的特定元素。

Answer 5

要滚动到页面上的特定元素，您可以在jQuery(document).ready(function($){...})中添加一项功能，如下所示：

$("#fromTHIS").click(function () {
    $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
    return true;
});

它在所有浏览器中都像魅力一样。根据需要调整速度。

如何转到页面上的特定元素？

5 个答案: