如何转到页面上的特定元素?[重复]

2020/10/26 16:41 · javascript ·  · 0评论

在我的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>

插件形式的标准技术如下所示:

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

如果该元素当前在页面上不可见,则可以使用本机scrollIntoView()方法。

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

其中true手段意味着与页面的顶部对齐,而与页面的false底部对齐。

否则,有一个scrollTo()插件的jQuery就可以使用。

或者只是得到top position()(文档)的元素,并设置scrollTop()(文档)到该位置:

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")));

并且您需要此功能进行工作:

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

在所有浏览器中,它的工作原理都一样。根据需要调整速度。

本文地址:http://javascript.askforanswer.com/ruhezhuandaoyemianshangdetedingyuansuzhongfu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!