The standard pages have menus at the top that allow you to quickly jump to the related lists further down on the page. Can we add these to our VF pages? I am using standard controller and using apex:detail tag.

Attribution to: doga

Possible Suggestion/Solution #1

There is no 'supported' way of displaying these hover links on custom (VF) detail pages just yet.

Here is an idea for it, which is surprisingly unpopular. I would've thought it would have a lot more votes. http://success.salesforce.com/ideaView?id=08730000000ZQo4AAG

However, there are hacks, (which I haven't tried) where the JavaScript from page source has been used to render these sections on custom pages. http://boards.developerforce.com/t5/Visualforce-Development/Hoverlinks-for-custom-related-list/m-p/116812

Attribution to: techtrekker

Possible Suggestion/Solution #2

Sorry guys, I am answering my own question. Hope it might be useful.

I developed following javascript code to generate similar links.

<apex:component >

<apex:includeScript value="{!URLFOR($Resource.JqueryUI, '/js/jquery-1.6.2.min.js')}" />

<script type="text/javascript">
    var $jq = jQuery.noConflict();

    $jq(document).ready(function() {
        var relatedlists = $jq("div.bRelatedList");
        var i = 0;
        relatedlists.each(function(){
            var rlid = this.id;
            var target = '#' + rlid + '_target';
            var title = document.getElementById(rlid + '_title').innerHTML;
            var body = document.getElementById(rlid + '_body');

            var count = $jq(body).find("table:first tr").size() - 1;

            var count_span = $jq("<span></span>")
            .addClass("count")
            .text("[" + count + "]");

            var title_span = $jq("<span></span>")
            .addClass("listTitle")
            .text(title)
            .append(count_span);


            var a = $jq("<a></a>")
            .addClass("linklet")
            .attr("href", target)
            .attr("id", rlid + '_link')
            .append(title_span);

            var panel = $jq("div#CustomRLPanelShadow");

            panel.append(a);

            if (relatedlists.size() != i + 1) {
                panel.append("<span class='pipe'> | </span>");
            }
            i++;
        });

    });
</script>

<div class="listHoverLinks" style="visibility: visible;clear:both;text-align:center;" id="CustomRLPanelShadow">
</div>

Attribution to: doga
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/4509