Bookmark. Navigation Plugin
Bookmark—page navigation that doesn’t take up space.
Long pages with lots of sections are hard to navigate. Bookmark creates links to each section and adds them to the page navigation. It gets along with any design.
The links in the navigation show the order and length of the sections, and the scrollbar shows where the user is. So by default, the active link is not distinguished from the rest. If you want to further emphasize the active section, rewrite the style for the link with the active
class.
Bookmark will automatically name section links if it doesn’t find a name in the name attribute. To be able to reference a section, it will add the transliterated name or data-hash
of the link to the address bar. You can disable string changes with the data-hashChange
attribute.
The menu animation is not annoying when scrolling both short and long distances.
Installation
Add scripts and styles to the <head>
section of the page:
<head>
<link href="path/to/bookmark.min.css" rel="stylesheet" />
<script src="path/to/jquery.js"></script>
<script src="path/to/bookmark.min.js"></script>
</head>
Add the bookmarks
class to the block with sections:
<div class="bookmarks">
<div class="bookmark" name="First Section" data-hash="first"></div>
<div class="bookmark" name="Second Section" data-hash="second"></div>
</div>
Or mark bookmark locations with the bookmark
class and run the script as a standard jQuery plugin:
<div class="foo">
<h1 class="bookmark" name="First Section" data-hash="first">Heading</h1>
</div>
<script type="text/javascript">
$(function () {
$('.foo').bookmark();
});
</script>
Configuration
Parameters are specified in the data
attributes of the tabbed block. When initializing manually, pass the object with parameters as an argument to the constructor function.
autoHide
(boolean
), defaults totrue
, to automatically hide the menu;autoHideTime
(number
), defaults to 800 ms, the time after which the menu will hide;fadeTime
(number
), default 400 ms, the rate of disappearance;scrollingTime
(number
), default 500 ms, the duration of scrolling after clicking a link;bookmarkClassName
(string
), defaults tobookmark
, the bookmark anchor class;touchDevices
(boolean
), defaultfalse
, display on touch devices.autoHide
does not work;onScrollStart
(function
) is called before scrolling to a section;onScrollEnd
(function
) is called after scrolling to a section.
The onScrollStart
and onScrollEnd
parameters can be set only via manual initialization with the constructor function.
Full Example
An example with all possible properties configured:
<head>
<link href="path/to/bookmark.min.css" rel="stylesheet" />
<script src="path/to/jquery.js"></script>
<script src="path/to/bookmark.min.js"></script>
</head>
<body>
<div class="foo" data-touchDevices="false" data-hashChange="false">
<h1 class="bookmark" name="First Section" data-hash="first">Heading</h1>
</div>
<script type="text/javascript">
$(function () {
$('.foo').bookmark({
autoHide: true,
autoHideTime: 900,
fadeTime: 400,
scrollingTime: 500,
bookmarkClassName: 'bookmark',
onScrollStart: function (curIndex, nextIndex) {},
onScrollEnd: function (curIndex, nextIndex) {}
// curIndex—number of the current section
// nextIndex—number of the next section
// both arguments are optional
});
});
</script>
</body>
Download
Send feedback, suggestions, and comments to bespoyasov@me.com!