# Anchors don't work in embedded notebook

**URL:** <https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884>\
**Category:** Help\
**Created:** [April 12, 2019, 5:46pm UTC](https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884 "2019-04-12T17:46:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bluprince13](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bluprince13/32/1646_2.png) [@bluprince13](https://talk.observablehq.com/u/bluprince13)\
**Post date:** [April 12, 2019, 5:46pm UTC](https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884/1 "2019-04-12T17:46:10Z")

</div>

Hi, I tried using [anchors](https://observablehq.com/@observablehq/changelog-2018-03-02#anchors) to allow the reader to jump around my Observable notebook.

The anchors work fine on the notebook itself. However, I’m embedding my notebook in my personal site. And, I found out that the anchors don’t work there. This is because the name of the cell isn’t being carried over to the embedded notebook as the id of the div.

Any idea how to fix this? Is it also a bug that needs to be fixed?

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 12, 2019, 5:58pm UTC](https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884/2 "2019-04-12T17:58:33Z")

</div>

Here’s a modification of the `intoFilter` function (from [your last thread](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/2)) that’ll make these links work:

```auto
<script type="module">

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "./YOUR-NOTEBOOK.js";

// modified from https://github.com/observablehq/inspector/blob/master/src/index.js#L51
const intoFilter = function(container, filterFunc) {
  if (typeof container === "string") {
    container = document.querySelector(container);
    if (container == null) throw new Error("container not found");
  }
  return function(variable) {
    if (filterFunc(variable.name)) {
      const div = document.createElement("div");
      if (variable.name) {
        const name = variable.name.split(' ');
        if (name[0] === "viewof" || name[0] === "initial") name.shift();
        if (name.length === 1 && !document.querySelector(name[0])) div.setAttribute("id", name[0]);
      }
      return new Inspector(container.appendChild(div));
    }
  };
};

// you can enter an arbitrary filtering function as the second argument to intoFilter.
// it should take the variable name (a string or undefined) as an input and return a boolean
Runtime.load(notebook, intoFilter(document.body, (name) => name !== "excludeThis"));

</script>

```

**Edit** : made more robust; should work better now with viewof and mutable cells.  
**Edit 2** : added missing braces…

---

<div class="post-metadata">

**Author:** ![bluprince13](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bluprince13/32/1646_2.png) [@bluprince13](https://talk.observablehq.com/u/bluprince13)\
**Post date:** [April 12, 2019, 6:49pm UTC](https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884/3 "2019-04-12T18:49:42Z")

</div>

Missing braces fixed the issue haha. It works now. 🙂

> if (name.length === 1 && !document.querySelector(name[0]))

The second check is just to make sure nothing else on the page already has that id, right?

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 12, 2019, 7:00pm UTC](https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884/4 "2019-04-12T19:00:54Z")

</div>

Yeah, it’s kind of a hack. The underlying concern there is that a cell `viewof X` actually expands into 2 variables, one named `viewof X` and one named `X` (similarly, `mutable Y` expands into `initial Y`, `mutable Y` and `Y`). However, only `viewof X` (respectively, `initial Y`) is displayed on [observablehq.com](http://observablehq.com). The code there should give the id only to `viewof X` (resp. `initial Y`) and not `X` (resp. `Y`) (though things can break down if you have name conflicts between variables in the notebook and pre-existing id’s on the page you’re embedding the notebook into).

---

<div class="post-metadata">

**Author:** ![bluprince13](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bluprince13/32/1646_2.png) [@bluprince13](https://talk.observablehq.com/u/bluprince13)\
**Post date:** [April 12, 2019, 7:03pm UTC](https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884/5 "2019-04-12T19:03:57Z")

</div>

Ah okay, got it. 🙂

Is the id thing not a bug? Is it not reasonable to expect that ids will be assigned automatically so that that your anchors still work on an embedded notebook? Or, do you reckon there’s some reason that shouldn’t be the default behaviour?

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 12, 2019, 7:14pm UTC](https://talk.observablehq.com/t/anchors-dont-work-in-embedded-notebook/1884/6 "2019-04-12T19:14:35Z")

</div>

I definitely see where you’re coming from. On the other hand here’s a reply I got a while back which suggests that this sort of thing could also be considered out-of-scope in some sense:

> [@Embedded notebook shows input value at bottom of cell](https://talk.observablehq.com/t/embedded-notebook-shows-input-value-at-bottom-of-cell/985/7):
>
> @bgchen — There’s currently no plan to change the behavior of Inspector.into() it’s [a simple, “brute” function](https://github.com/observablehq/notebook-inspector/blob/master/src/index.js#L49-L57) that blindly renders every variable in the runtime’s main module, in order, into a given container. Useful for debugging or extremely simple examples, but for any sophisticated use case, you’re expected to use new Inspector — or your own custom rendering strategy — yourself.