Smooth scroll

This topic contains 5 replies, has 2 voices, and was last updated by  acho66 1 year, 3 months ago.

  • Creator
    Topic
  • #104

    iltaen
    Keymaster

    Theme support smooth autoscroll by click on main menu item. For example, on demo site when you click on menu item (Apps, Team, Price etc.) page will scroll to necessary section.
    At the same time, url of site will change too, it’ll have hashlink (added text after symbol “#”). For example, if you’ll click “Price”, url changed to pandorabox.iltaen.com/#price

    (You can read more about hash links here: css-tricks.com/hash-tag-links-padding )

    If you want to add same scroll to custom section, you need to do 2 steps:
    1. Add attribute “id” to target element on the page
    2. Add hash tag to menu link.

    So, let’s use it in our theme. If you want to scroll to one of default section – it’s easy, they already have prepared id’s. You need to add menu item with correct hashlink:

    • example.com/#home
    • example.com/#slider
    • example.com/#skills
    • example.com/#team
    • example.com/#price
    • example.com/#partners
    • example.com/#contacts

    (Sure, need to change “example.com” to your site)

    If you want add smooth scroll to the custom PB Block – it’s easy too. Open the edit page of your PB block and search the input “Block anchor” and write id for this (warning: id should be unique!). Here is generating link for main menu.
    For demo site it will generate this link: http://pandorabox.iltaen.com/#custom
    (Try it on your site!)

    Also, you can add id to any place of page, for example, in link:
    <a href="google.com"> link </a> – default link
    <a href="google.com" id="customlink"> link </a> – modified link
    And then you can add menu item with url “example.com/#customlink” and by click on this page will scroll to the link with this id.

    Enjoy!

    • This topic was modified 2 years, 11 months ago by  iltaen.
    • This topic was modified 2 years, 11 months ago by  iltaen.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #254

    acho66
    Participant

    Hi,

    I am trying to use smooth scroll but all I get is instant jump to the section selected from the menu.

    Can you please describe more specific how to achieve smooth scroll effect

    Thanks

    #255

    iltaen
    Keymaster

    hi! Can I see your site?

    #256

    acho66
    Participant
    #257

    iltaen
    Keymaster

    Found. it’s theme bug. For fix it, just open the wp-content/themes/PandoraBox/js/script.js and replace line 52:

    $('.mainmenu a[href*=#]').on("click", function(e){

    with this:
    $('.mainmenu a[href*="#"]').on("click", function(e){

    Thanks for catching bug, I’ll prepare theme update soon

    #258

    acho66
    Participant

    Thank you!!!

    now everything is good 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.