結論から言うと、JavaScriptのwindow.location.hrefでアンカーリンクが簡単に実装できるよという話です。
はじめに
iframe外からiframe内へのアンカーリンクで困る、というのはよく目にします。
今回はiframe内で完結しているコンテンツにおいて、アンカーリンクが正常に作動しなかったときのメモです。
滅多にないと思いますが、ちょっと特殊なケース（今回ならGAS）で同じような問題に遭遇した際の代替案として今後役立てばと思います。
また、JSで手軽にページ内リンクが設定できる個人的な発見でもあったので記録します。
Google Siteで困りました
始まりはGoogle Siteでページを作成する中で、GASのApps Scriptガジェットを埋め込んだときのことです。
埋め込んだガジェット部分はiframeとして処理され、作成したコードは全てiframe内に組み込まれるわけですが
例えば、ガジェット内で下記のようにページ内リンクをさせたかったとします。
<a href="#hoge">リンク</a>
<div id="hoge">
「リンク」クリックでここにジャンプさせたい
</div>
私の想定ではいつも通りid="hoge"までピュンと飛んでくれるはずだったのですが
なぜだか別ページに移動してしまいます。
たぶんなのですが、GASでリンクを貼る場合は絶対パスでないと自動でURLを補完するようで、全く別ページのURLの末尾に#hogeが追記されたものに置き換わってしまうのです。
これを機能させるにはiframe内のURLを知る必要があるということ…？
iframe内のURLって…？
試したこと
わざわざ段落を設けるまでのことはしていないのですが、調べるとid="hoge"をname="hoge"に変えたらいいという解決策が複数出てきたので試しました。だめでした。
対処法 onclick="window.location.href='ID'"
主にHTMLとCSSばかり触ってきた人間なので、<a href="#ID"></a>のみを使ってきましたがJSでも簡単に実装できるということを今回学びました。
方法は簡単で、クリックさせたいタグにonclick="window.location.href='飛ばしたい先のID'"を足すだけです。
先ほどの例になぞればこんな感じ。
<a onclick="window.location.href='#hoge'">リンク</a>
<div id="hoge">
「リンク」クリックでここにジャンプさせたい
</div>
aタグ以外にも使える上、手軽で、さらにIDを持つ要素の位置情報を確実に取得し移動してくれるので万能そうです。