同一页面上的平滑滚动无法正常工作

Question

I'm trying to achieve smooth scrolling on same page using PHP code inside jQuery(trying to generate final jquery code using PHP). But for some reason it's not working, I'd appreciate if anyone can point out the errors or why it's not working

// When the Document Object Model is ready
   jQuery(document).ready(function(){
   // 'scroll' is the amount of pixels destination
   // is from the top of the document
   var scroll = jQuery('<?php echo get_option('smooth_scroll'); ?>').offset().top;

// When button is clicked
  jQuery('.test').click(function(){
   // Scroll down to 'scroll'
   jQuery('html, body').animate({scrollTop:scroll}, 'slow');
   // Stop the link from acting like a normal anchor link
   return false;
  });
});

I have a href link with class "test" in it. When that button is clicked I want it to smooth scroll to go a specific div of the same page[thru get_option('smooth_scroll')] div will be updated by users).

Answer 1

First of all - please try to move the scroll variable assignment into the click event:

jQuery(function(){
  jQuery('.test').on('click', function(e){
    e.preventDefault();
    var scroll = jQuery('<?php echo get_option('smooth_scroll'); ?>').offset().top;
    jQuery('html, body').animate({scrollTop:scroll}, 'slow');
  });
});

Because currently you can have a situation when your element is not on its final position - as it is calculated on DOMContentLoaded event, which is called after loading complete DOM structure, but CSS/JS/image assets can be not loaded at this moment, what can affect the calculation result.