Public Forums 71,145 posts

[VariFrame Friend VariFrameJoin date: November 2015Posts: 76Downloads:10Uploads:1 Thanks: 6 Thanked: 3 times in 2 posts]

#1063151

Hey guys – I have one more problem here. I have an anchor menu and when you click its links it jumps fast to a destination. I would need it to smooth scroll there… I have noticed that back to top button has a smooth scrolling so there must be a jquerry code for it somewhere could you please help me with that? Thanks 🙂

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1063450

Hi,

I will report to the team for further consideration on this.

Regards

[VariFrame Friend VariFrameJoin date: November 2015Posts: 76Downloads:10Uploads:1 Thanks: 6 Thanked: 3 times in 2 posts]

#1074780

Nice…so until we have this in JA Builder (would be wonderful to have something like next to Anchor function to have a button to enable or disable smooth scroll :-O) I resolved it like this. For anyone who needs smooth scrolling anchors:

1) Navigate to Extensions -> Click on templates
2)Click on JA Builder -> Custom code (it should work with any other template cause most of them use something like custom codes in template details)
3) Add this code to HEAD (shouldn’t make a difference if you use "top of head" or "bottom of head" code area… I have mine in bottom area):

jQuery(document).ready(function ($) {
    $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
        // Grab height of fixed header
        var headHeight = $('header').outerHeight();
        // 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 - headHeight - 20
            }, 1000, function() {
              // Callback after animation
              // Don't scroll on focus!
                $.fn.focusNoScroll = function(){
                  var x = window.scrollX, y = window.scrollY;
                  this.focus();
                  window.scrollTo(x, y);
                  return this; //chainability

                };
                // Must change focus, but don't scroll!
              var $target = $(target);
              $target.focusNoScroll();
              if ($target.is(":focus")) { // Checking if the target was focused
                return false;
              } else {
                $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                $target.focusNoScroll(); // Set focus again
              };
            });
          }
        }
      });
});

And dont forget to add script (in angle brackets, no idea how to put it here cause the forum always changes it to code and doesnt show it here) to before and after the code itself!

From now on your anchors should have smooth scroll AND it also measures the height of your sticky menu and adjusts the scroll accordingly so that it doesn’t cover your headings…

EDIT:

This line:

jQuery(document).ready(function ($)

is only there for ppl using jquery easy or any other jquery no conflict plugins. If you dont use any you can remove this line (I think :-O)

2 users say Thank You to VariFrame for this useful post

1. Saguaros
2. Kovou

[Author]

Posts