# Navigation

> Navigate documents in the Document Viewer: scrolling, page thumbnails and the two-page view, scrollToPage and the events of document and hypertext links.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Document Viewer > Navigation
- **1976 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/navigation/llms-full.txt

---

Users scroll, jump to pages and follow links in the Document Viewer, and your own navigation next to the viewer, such as a table of contents or a list of sections, can do the same. Your code scrolls to a page, shows the page thumbnails and decides what happens when users click links.

The examples change the view of the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/aspnet-core/llms-full.txt) tutorial. They load *App\_Data/template.docx*, as the tutorial does in "Load a File With DocumentPath"; use a document with several pages and at least one hyperlink.

### How Users Navigate

- **Scrolling.** Users scroll through the pages of the document.
- **Page thumbnails.** The thumbnail sidebar shows a small image of each page. A toolbar button shows and hides it, and the sidebar can be resized.
- **Two-page view.** A toolbar button switches between a view with one page and a view with two pages side by side, like an open book, which gives an overview of long documents.
- **Page navigator.** A small bar at the bottom of the pages shows the current page and the number of pages, with **Previous page** and **Next page** buttons. The status bar shows the same numbers, for example "PAGE 1 OF 5".
- **Links.** A click on a document link, such as an entry of a table of contents, scrolls to its target in the document. A click on a hypertext link navigates to its URL.

The following viewer shows a document of five pages in the two-page view, with the thumbnail sidebar on the left and the page navigator at the bottom:

![The Document Viewer in the two-page view: four pages of a five-page document side by side, the thumbnail sidebar with pages 1 to 4, the page navigator "1 / 5" and the status bar "PAGE 1 OF 5"](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/viewer-two-page-view.6e6c63dd.webp)

On smaller screens, the viewer shows a mobile-friendly view with its own buttons; see [User Interface](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/user-interface/llms-full.txt).

### Navigate From Code

[TXDocumentViewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/txdocumentviewer/llms-full.txt) has methods for the same functions. The following view adds a page number field with a **Go** button and a button that shows and hides the thumbnails. Replace the content of *Views/Home/Index.cshtml*:

```cshtml
@using TXTextControl.Web.MVC.DocumentViewer

<div style="margin-bottom: 8px;">
    <label for="pageNumber">Page:</label>
    <input type="number" id="pageNumber" value="1" />
    <input type="button" id="goToPage" value="Go" />
    <input type="button" id="thumbnails" value="Show or Hide Thumbnails" />
</div>

<div style="width: 800px; height: 600px;">

@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentPath = "App_Data/template.docx";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.ShowThumbnailPane = false;
}).Render()

</div>

<script>
    window.addEventListener("documentViewerLoaded", function () {
        document.getElementById("goToPage").addEventListener("click", function () {
            var page = parseInt(document.getElementById("pageNumber").value, 10);
            TXDocumentViewer.scrollToPage(page);
        });

        document.getElementById("thumbnails").addEventListener("click", function () {
            TXDocumentViewer.toggleSidebar();
        });
    });
</script>
```

The code works as follows:

- [ShowThumbnailPane](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/documentviewersettings/showthumbnailpane-property/llms-full.txt) with `false` hides the thumbnail sidebar when the viewer starts. By default, it is visible. In Angular, React and a plain JavaScript page, the setting is named `showThumbnailPane`.
- `TXDocumentViewer` exists only after the viewer has raised the `documentViewerLoaded` event, so the click handlers are attached in its handler.
- [scrollToPage](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/scrolltopage-method/llms-full.txt) scrolls to the page with the given number.
- [toggleSidebar](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/togglesidebar-method/llms-full.txt) shows the thumbnail sidebar if it is hidden, and hides it if it is visible.

Run the application, enter a page number and click **Go**: the viewer scrolls to that page. Click **Show or Hide Thumbnails** to open the sidebar.

Both methods return nothing. The API has no method that returns the current page or the number of pages, and no event that is raised when the user scrolls to another page.

### Handle Link Clicks

The viewer raises an event before it follows a link:

| Event | Is raised when | Default behavior |
|---|---|---|
| `documentLinkClicked` | A link to a target in the same document is clicked | The viewer scrolls to the target |
| `hypertextLinkClicked` | A link to a URL outside the document is clicked | The viewer navigates to the URL |

Call `preventDefault` on the event object to stop the default behavior. The following script keeps users in the application by ignoring clicks on hypertext links, while document links keep working. Add it to the handler of `documentViewerLoaded` in the view above:

```javascript
TXDocumentViewer.addEventListener("hypertextLinkClicked", function (e) {
  // Don't navigate to the URL of the link
  e.preventDefault();
});
```

[addEventListener](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/documentviewercontroller/addeventlistener-method/llms-full.txt) attaches the handler. Apart from `preventDefault`, the reference documents no properties of the event object for these two events.

The links come from the document. In the Document Editor, users and your code insert hyperlinks, bookmarks and document links, as described in [Fields](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/fields/#insert-hyperlinks-and-bookmarks). A table of contents inserted with links consists of document links to its headings; see [Tables of Contents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/tables-of-contents/#links-to-the-headings).

### Next Steps

- [Search](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/search/llms-full.txt): find text in the document.
- [Zooming](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/zooming/llms-full.txt): change the size of the pages.
- [Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/events/llms-full.txt): all events of the viewer.

---

## Nearby

- **Previous:** [Saving Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/saving/llms-full.txt)
- **Next:** [Search](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/search/llms-full.txt)