diff --git a/webapp/src/main/webapp/themes/iph/js/toc.js b/webapp/src/main/webapp/themes/iph/js/toc.js
new file mode 100644
index 00000000..7f5d4434
--- /dev/null
+++ b/webapp/src/main/webapp/themes/iph/js/toc.js
@@ -0,0 +1,34 @@
+	document.addEventListener('DOMContentLoaded', createTOC(), false);
+
+	function createTOC(){
+		var complexDocElement = document.getElementById("complexDocument");
+		var tocElement = document.getElementById("tocPlaceHolder");
+		
+		if (complexDocElement === null || tocElement === null){
+			console.log("no complex document or no placeholder");
+			return;
+		}
+		addItemsToTOC(complexDocElement,tocElement)
+	}
+	function addItemsToTOC(docPart, tocElement){
+		var docPartChilds = docPart.childNodes;
+		for (var i = 0; i < docPartChilds.length; i++){
+			var docPartChild = docPartChilds[i];
+			if ( docPartChild.nodeType === Node.ELEMENT_NODE && docPartChild.classList.contains("documentPart")){
+				var tocElementChild = createTOCItem(docPartChild, tocElement);
+				addItemsToTOC(docPartChild,tocElementChild);
+			}
+		}
+	}
+	function createTOCItem(docPart, tocElement){
+		var newTOCElement = document.createElement("div");
+		var anchor = docPart.getAttribute('id');
+		var docPartButton = docPart.previousElementSibling;
+		var itemName = docPartButton.textContent;
+		var link = document.createElement("a");
+		link.setAttribute("href","#" + anchor);
+		link.innerText = itemName;
+		newTOCElement.appendChild(link);
+		tocElement.appendChild(newTOCElement);
+		return newTOCElement;
+	}
\ No newline at end of file
diff --git a/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl b/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
index a63819ba..fad4c505 100644
--- a/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
+++ b/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
@@ -53,7 +53,7 @@
 </#macro>
  
 <#macro arrangeDocumentParts >
-	<div class="complexDocument articleParts" style="display:block;">
+	<div id="complexDocument" class="complexDocument articleParts" style="display:block;">
 	<#assign lastLevel = 0 >
 	 <#list paths as order>
 	   <#-- ${order.path} -->
@@ -65,32 +65,33 @@
 	        <#assign bibliographyCounter = excerptProperties.bibliographyCounter >
 	     </#if>
 	   </#list>
-   	    <@startDocumentPart order.level?number lastLevel/>
+   	    <@startDocumentPart order.level?number order.path lastLevel/>
 	    <#if excerptText?? && excerptTextName?? && excerptTextName?has_content && excerptText?has_content>  
 	      <div class="htmlExcerpt" style="list-style:none;">
 	        ${excerptText}
-	        <@arrangeSources works worksCounter?number order.elenphExcerpt />
-	     	<@arrangeLiterature bibliography bibliographyCounter?number order.elenphExcerpt />
 	      </div>
+	        <@arrangeSources works worksCounter?number order.path order.elenphExcerpt />
+	     	<@arrangeLiterature bibliography bibliographyCounter?number order.path order.elenphExcerpt />
 	    </#if> 
 	   <#assign lastLevel = order.level?number >
 	 </#list>
 	 <@endDocumentPart lastLevel  />
+	 <@arrangeSources works works?size "anchor-all-sources" />
+	 <@arrangeLiterature bibliography bibliography?size "anchor-all-literature" />
 	</div>
-	<@arrangeSources works works?size />
-	<@arrangeLiterature bibliography bibliography?size />
+	
 </#macro>
 
-<#macro startDocumentPart newLevel lastLevel=0 >
+<#macro startDocumentPart newLevel path lastLevel=0 >
 	<#assign depth = newLevel - lastLevel >
 	<#if depth == 0>
 	  <@closeDocPart 1 />
-	  <@openDocPart 1 />
+	  <@openDocPart 1 path />
 	<#elseif depth &gt; 0>
-	  <@openDocPart depth />
+	  <@openDocPart depth path />
 	<#else >
 	  <@closeDocPart -depth+1 />
-	  <@openDocPart 1 />
+	  <@openDocPart 1 path />
 	</#if>
 </#macro>
 
@@ -107,17 +108,17 @@
   </#list>
 </#macro>
 
-<#macro openDocPart count>
+<#macro openDocPart count path >
   <#list 1..count as x>
     <button type="button" style="border:none;padding: 18px;width: 100%; text-align:left;" class="collapsible">${excerptTextName}</button>
-	<div class = "documentPart autoExpand articleExcerpt" style="display:block;">
+	<div class="documentPart autoExpand articleExcerpt" id="anchor-${path}" style="display:block;">
   </#list>
 </#macro>
 
-<#macro arrangeSources sources counter filter="none">
+<#macro arrangeSources sources counter identifier filter="none">
 	<#if sources?? && sources?has_content && counter &gt; 0>
 	  <button type="button" class="collapsible" style="border: none; color: #8B4513; padding: 18px;width: 100%;text-align:left; background-color: #ffffff; background-image: url(${urls.base}/themes/iph/images/book_icon.png); background-repeat: no-repeat; background-position: left center;">Источники</button>
-	    <div class="autoExpand works" style="display:block;">
+	    <div class="autoExpand documentPart works" id="anchor-${identifier}-sources" style="display:block;">
 	      <#list sources as source>
 	        <#if filter == "none" || source.excerpt == filter >
 	          <div class="work" style="display:list-item;list-style-image:url(${urls.base}/themes/iph/images/bullet_icon.png); font-style: italic; font-family: PT Serif;">
@@ -129,10 +130,10 @@
 	</#if>
 </#macro>
 
-<#macro arrangeLiterature literature counter filter="none">
+<#macro arrangeLiterature literature counter identifier filter="none">
 	<#if literature?? && literature?has_content && counter &gt; 0>
 	  <button type="button" class="collapsible" style="border:none; color: #8B4513; padding: 18px;width: 100%; text-align: left; background-color: #ffffff; background-image: url(${urls.base}/themes/iph/images/book_icon.png); background-repeat: no-repeat; background-position: left center;">Литература</button>
-	    <div class="autoExpand bibliography" style="display:block;">
+	    <div class="autoExpand documentPart bibliography" id="anchor-${identifier}-literature" style="display:block;">
 	      <#list literature as literatureItem>
    	        <#if filter == "none" || literatureItem.excerpt == filter >
 			  <div class="bibliography_entry" style="display:list-item;list-style-image:url(${urls.base}/themes/iph/images/bullet_icon.png); font-style: italic; font-family: PT Serif;">