Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Problem with anchor scroll

Problem with anchor scroll

Scheduled Pinned Locked Moved General Discussion
4 Posts 3 Posters 101 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    Kfjimmedy
    wrote on last edited by
    #1

    First post, hope this is the right subforum, otherwise please remove or relocate.
    I have a bit of a problem and I can't seem to find the answer.
    I'm trying to create a simple anchor scroll, the website only consists of one page with multiple sections. I gave each section an id (#about, #contact, #imprint,...you get the idea). I use my own menu (i put the laytheme menu on display=none;) and I use a common menu structure:

    <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#imprint">Imprint</a></li>
    ...
    </ul>
    

    When I load the page everything is normal (different background colors for the different sections, different texts...), but when I click on a menu point the page turns white, the contents and the styling is gone, but it still scrolls to the right point on the page (i can see it by looking at the scrollbar). If I reload the same URL it appears again but as soon as i click the menu it turns blank again.

    Is there something I am missing? The links should be correct since it is the same page.

    I tried a code snippet I found here for debugging purposes:

    <script>
        window.laytheme.on('newpageshown', function(){
           if(window.location.hash.length > 0){
               var id = window.location.hash;
               if(jQuery(id).length > 0){
                    jQuery('html, body').animate(
                    { scrollTop: jQuery(id).offset().top },
                    { duration: 1200 });
               }
           } 
        });
    </script>
    

    If I type in the complete url with the /#about at the end it scrolls to this point like it's supposed to but again if I click the menu it turns white but still scrolls to the right point.

    Does anyone have an idea?

    1 Reply Last reply
    0
    • K Offline
      K Offline
      Kfjimmedy
      wrote on last edited by
      #2

      So, debugger shows the following:
      Uncaught TypeError: Cannot read properties of null (reading 'type')
      in the frontend.app.min.js.
      The line in question says:

       g.$body.attr("data-type", window.history.state.type).attr("data-id", window.history.state.id).attr("data-catid", s.utility_controller.stringifyCatIds(window.history.state.catid)),
      
      1 Reply Last reply
      0
      • RichardR Offline
        RichardR Offline
        Richard
        Global Moderator
        wrote on last edited by
        #3

        Dear @Kfjimmedy

        Lay Theme has built in Anchor scrolling if you wish.

        Given any row or element an id:
        Screen Shot 2020-11-13 at 9.07.33 AM.png

        The in > Appearance > Menu's you can create a "custom Link" with the a # followed by your ID :

        Screen Shot 2022-01-27 at 9.14.13 AM.png

        You can also set spaces for your Anchorscroll in > Lay Options >

        Screen Shot 2022-01-27 at 9.15.42 AM.png


        Hope this helps & best wishes
        Richard
        1 Reply Last reply
        0
        • A Offline
          A Offline
          Antoine.dvc
          wrote on last edited by Antoine.dvc
          #4
          This post is deleted!
          1 Reply Last reply
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          I also code custom websites or custom Lay features.
          šŸ’æ Email me here: šŸ’æ
          info@laytheme.com

          Before you post:
          1. When using a WordPress Cache plugin, disable it or clear your cache.
          2. Update Lay Theme and all Lay Theme Addons
          3. Disable all Plugins
          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

          This often solves issues you might run into

          When you post:
          1. Post a link to where the problem is
          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
          Online Users
          A
          alasdair17
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
          laytheme.com
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search