Плавная прокрутка до упора на той же странице

Question

Назовите меня глупым, но я этого не вижу. Я сделал страницу Joomla со ссылками на разделы на той же странице. очень простой: <a href="#sed">, а затем <p id="sed">. Я включаю JQuery, как это:

<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script> 

Она является частью Joomla 3.

Я использую этот сценарий из CSS-Tricks, который я положил в страницы:

<script> 
$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 

I 'скрипел с CSS Tricks sample page (копировал/вставлял его в свой собственный HTML-редактор и менял немного кода), и да, он работает, но я не могу заставить его работать на моей собственной странице. Страница просто перескакивает на якорь, но не прокручивается плавно.

Имейте в виду: я не знаю ничего JavaScript или JQuery, так что терпите меня ... к специалисту JQuery это должно быть кусок пирога ....

Вот тестовая страница я сделал : http://test.tomhiemstra.nl.

Любая помощь приветствуется.

Cheers,

Thom

Answer 1

Вы можете попробовать это

$('a[href^="#"]').click(function(event) { 
 
\t event.preventDefault(); 
 
\t var target = $(this).attr("href").substring(1); 
 
\t if(target) { 
 
\t \t $('html,body').animate({ 
 
      scrollTop: $('[name=' + target +']').offset().top 
 
     }, 1000); 
 
\t } 
 
});

Answer 2

Я не мог понять, что причиной этого, но на вашей странице $ ISN» t получать признание. Замените все $ в вашем скрипте на jQuery, и он работает.

jQuery(function() { 
    jQuery('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

     var target = jQuery(this.hash); 
     target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     jQuery('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

С другой стороны, это, вероятно, лучше, чтобы обернуть вашу функцию в одном, что будет сопоставлена ​​$ к jQuery.

(function ($) { 
    $(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 

       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
       if (target.length) { 
        $('html,body').animate({ 
         scrollTop: target.offset().top 
        }, 1000); 
        return false; 
       } 
      } 
     }); 
    }); 
})(jQuery); 

Answer 3

С помощью Талии С. выше, это то, что я придумал. Я надеюсь, что я сделал это правильно, со всеми скобками и фигурные скобки и т.д .:

<script> 
    (function ($) { 
$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 

      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      if (target.length) { 
       $('html,body').animate({ 
        scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
     } 
    }); 
}); 
})(jQuery); 
</script> 

ли я добавить слишком много скобок или слишком мало?

Однако я все еще не понимаю, почему $ не был признан как jQuery, что является одной из самых основных вещей, которые вы изучили в jQuery (да, я пришел так далеко: -P). Если кто-нибудь может прояснить это мне «как мне четыре года».

Thanx снова Talya С. и мои извинения за опечатку :-)

Thom