Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues

Animated scrolling

[top], [scroll_to]

The scroll_to shortcode displays a link that allows scrolling to a location in a page with animation. The top shortcode works the same way, the only difference is the link text is 'Top' by default.

to The identifier of the HTML element to scroll to. The default is 'top' that means scroll to the top of the page.
anim Specifies whether scrolling animation is required or not (true | false). Default is true.
duration The duration of the scrolling animation, in milliseconds
easing Specifies the easing function for the scrolling animation. Easing functions (timing functions) specify how the intermediate values are calculated during the animation. It allows for a transition to change speed over its duration.
Supported functions:
  • linear
  • swing
  • ease, ease-in, ease-out, ease-in-out
  • quad-in, quad-out, quad-in-out
  • cubic-in, cubic-out, cubic-in-out
  • exp-in, exp-out, exp-in-out
  • back-in, back-out, back-in-out
  • bounce-xl, bounce-l, bounce, bounce-s, bounce-xs
  • elastic-xl, elastic-l, elastic, elastic-s, elastic-xs
See Live Demo.
stoponwheel Specifies whether the scroll animation should stop when the mouse wheel rolls (true | false). Default is true.
vertoffset Specifies the vertical distance between the top of the element identified by the to attribute (see above) and the location where the scrolling ends, in pixels. Default is 0.

Live example