There are lots of ways to do things, and here's my take.
First of all, the problem I see with your improved code,
<a id="Part_1"></a><p class="Section-Heading" id="toc_marker-4"><a id="Anchor"></a>Part I</p>
is that the <a> and <p> tags overlap. This sometimes works, and sometimes doesn't.
I presume that you (OP) and cybmole want to avoid the situation where the return from the footnote places you back on a page with the footnote number itself at the top of the page, losing the context of the footnote until you go back a page.
This can be avoided by putting the return target in a span which encloses however much context you want to include, thus:
<p class="normal"> blah blah blah... <span id="ret-fn-1">Just a second, Danger, what about my pickle?</span><span class="footnote-reference"><a href="../Text/endnotes.xhtml#fn-1" >1</a></span></span>
and the corresponding footnote itself:
<p class="ttb-body-text-11-0-14-0"><span><a href="../Text/Chapter_0022.xhtml#ret-fn-1" id="fn-1">1</a></span> Rocky Rococo, as quoted by Firesign Theatre (1969)</p>
Of course, if you want the whole paragraph containing the footnote, just put the id="ret-fn-1" attribute in the corresponding <p> tag. Sometimes, though, the whole paragraph might be too long.
And for completeness, here's the CSS I use for the superscripted footnote numbers:
font-family: "Times New Roman" , serif;
And font-size can be adjusted as desired, to minimize the line-spacing effect cybmole noted, versus having the footnote too small to be readily seen.