x

Website keeps scrolling up

Hey everyone,

I transformed an existing Weebly website to a one-page design for a client. This website works fine, but on mobile the navigation is bad. At first the menu didn't work at all on the homepage, but on other pages it did. Now it does work.


The new problem is: When I press a menu item, it scrolls to the right section, but once I tap the page to hide the menu, it scrolls back up all the way. This makes the navigation menu useless. I also can't find a way to make the mobile navbar sticky.


Help is greatly appreciated. I'm using the Legacy. theme.

The website is: amsterdamsbewind(dot)nl

1,014 Views
Message 1 of 5
Report
4 REPLIES 4
Square

Thanks for your post, @RC404. If you switch to a standard theme and publish, does that resolve the issue?

1,003 Views
Message 6 of 5
Report

Hey @Adam, thanks for your suggestion. Sadly, it doesn't work. It happens on every mobile theme I pick. I've used the following Javascript code to make the page scroll using the anchor links, maybe that causes the issue. I've tried altering and removing the code with no luck.

<script>

// Select all links with hashes

$('a[href*="#"]')

  // Remove links that don't actually link to anything

  .not('[href="#"]')

  .not('[href="#0"]')

  .click(function(event) {

    // On-page links

    if (

      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 

      && 

      location.hostname == this.hostname

    ) {

      // Figure out element to scroll to

      var target = $(this.hash);

      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

      // Does a scroll target exist?

      if (target.length) {

        // Only prevent default if animation is actually gonna happen

        event.preventDefault();

        $('html, body').animate({

          scrollTop: target.offset().top

        }, 1000, function() {

          // Callback after animation

          // Must change focus!

          var $target = $(target);

          $target.focus();

          if ($target.is(":focus")) { // Checking if the target was focused

            return false;

          } else {

            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable

            $target.focus(); // Set focus again

          };

        });

      }

    }

  });

</script>

I'm starting to think this is a Weebly-issue. I've implemented the same code on other HTML/CSS one-page websites and that works like it should. I can't figure out what the problem might be.

992 Views
Message 6 of 5
Report

I would also like to make the mobile header sticky, but there's no way to edit the mobile theme. How can this be done? @Adam 

960 Views
Message 6 of 5
Report
Square

Weebly employees are not able to assist with custom code, but another user on here might be able to help you out. It might also be easier to change the theme to a standard Weebly theme that includes a sticky header, however, I don't believe any of the themes will display a sticky header on mobile. All of the responsive themes will change to a hamburger mobile menu depending on screen size. 

950 Views
Message 6 of 5
Report