如何滚动到短码生成的锚点

时间:2017-07-17 作者:LarryG001

我被卡住了。。。

我在WP页面中有一个短代码。shortcode中的PHP函数执行以下逻辑:

if (isset($_GET[\'some_id\'])) { // Get single item
   Query MySQL table to get the item with the id=\'some_id\'
   // Show item
   $html .= \'Some html\';
   $html .= \'<div id="div_id">blabla</div>\'; // <-- Here is the problem zone
   return $html; 
   // All of the above works perfectly
   }
else { // Show list of items
   Query MySQL table to get list of items
   //Show list
        foreach ($results as $result)
            $html .= $result->titel.\' <a href="\'.esc_url( add_query_arg( \'some_id\', $result->id, \'The URL of the current page\' ) ).\'">Get details</a>\';
        return $html;
        }
这段代码完成了它应该做的事情:页面首先显示项目列表(未设置b/c URL参数some\\u id)。

然后,在列表中,我单击“获取详细信息”。完全相同的页面重新加载(现在设置了参数“some\\u id”),我在某处获得了相应的输出,其中包含div id=“blabla”。

然而,我希望页面随后直接滚动到div id=“blabla”,但我无法实现这一点。我尝试了javascript、jquery,还将#blablabla放在URL中(URL/?some\\u id=3#blabla)。。。什么都不管用。。。

非常感谢任何提示/指示。非常感谢。拉里

抱歉,这是一个愚蠢的javascript错误。。。。请原谅打扰。

1 个回复
最合适的回答,由SO网友:Johansson 整理而成

这其实不是一个与WordPress相关的问题,但因为它很简单,我给你贴了一个答案。

可以使用jQuery滚动到元素。检查是否设置了查询变量,如果设置了,请在加载页面后滚动到元素:

(function($){
    // Function to get the current query var
    function get_query_var(query) {
        if (!url) url = window.location.href;
        query = query.replace(/[\\[\\]]/g, "\\\\$&");
        var regex = new RegExp("[?&]" + query + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return \'\';
        return decodeURIComponent(results[2].replace(/\\+/g, " "));
    }
    // Check if query var is set
    var myQuery = get_query_var(\'some_id\');
    if ( myQuery ) {
        // Now do the scrolling
            $( \'html,body\' ).animate({
                scrollTop: $("#div_id").scrollTop()
                },1000
            );
    }
})(jQuery);

结束

相关推荐

Use WP_Query in shortcode

我正在尝试从前四篇文章中获取元信息,这些文章的元键等于Sedan,然后对这些文章的元进行格式化,以便设置图库类型的显示框。我相信这与我的方法有关,因为我仍处于学习曲线的陡峭部分。如有任何意见、建议或回答,将不胜感激。使用此代码,我试图生成的HTML不会显示在前端。好像我什么都没做似的。add_shortcode(\'sedan-tabs\',\'build_sedan_tabs\'); function build_sedan_tabs(){ $args1 = array(