How to add a button to a document library

Question

So I want to add a button to a document library next to the other buttons (new, upload, sync, more) that acts as a link to take you to a page related to the document library. I have already put a decent amount of time into this project and will explain what I've done thus far. To make the button I was going to add a scriptlink to a javascript script that appends the button to the list of buttons. Using dev tools (F12) I found that the buttons are list items of .ms-qcb-leftzone where each list item has a class ms-qcb-item. Thus, the jQuery should look like this:

<script>
$(document).ready(function(){
$('.ms-qcb-leftzone').append('<li class="ms-qcb-item"><a href="http://www.google.com">ButtonName</a></li>');
})
<script>

I saved this as button.js and put it in SiteAssets/Scripts, thus the scriptlink that I put on the masterpage should look like the following:

<SharePoint:ScriptLink language="javascript" name="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" runat="server" Localizable="false" /> 
<SharePoint:ScriptLink language="javascript" name="~sitecollection/SiteAssets/Scripts/button.js" runat="server" Localizable="false" />

I then visited my page and no button. I went to check if the script was being run by putting a breakpoint in at the line of the JS code above. The script was being run because it paused at the breakpoint. This is where I'm lost, the code is running and I had an MS Techie helping make sure it was correct.

Answer 1

Rather than using $(document).ready() try this:

<script>
_spBodyOnLoadFunctionNames.push("ButtonFunc");

function ButtonFunc() {
   $('.ms-qcb-leftzone').append('<li class="ms-qcb-item"><a href="http://www.google.com">ButtonName</a></li>');
})
</script>

If this doesn't work check that the selector $('.ms-qcb-leftzone') is actually finding something by doing something like:

var elems = $('.ms-qcb-leftzone');
console.log(elems.length);