2016-08-15 4 views
0

У меня есть this Javascript file:Javascript прокрутки на якорь нажмите не работает

// .scroll to anchors 
jQuery(".scroll").on('click', function(e){ 
    e.preventDefault(); 
    var href = jQuery(this).attr('href'); 
    var hash = href.split('#'); 
    var url_hash = '#' + hash[1]; 
    if (jQuery(url_hash).length > 0) { 
     var offset = (jQuery(window).width()<769) ? 20 : 65; 
     jQuery('html, body').animate({ 
      scrollTop: jQuery(url_hash).offset().top-offset 
     }, 1000); 
    } else{ 
     location.href = href; 
    } 
}); 

помещён на this page, который содержит следующий HTML:

<ol> 
    <li><a class="scroll" href="#one">How do I apply to work with you?</a></li> 
    <li><a class="scroll" href="#two">Do I need to address selection criteria?</a></li> 
    <li><a class="scroll" href="#three">Is there a closing date for applications for your positions?</a></li> 
    <li><a class="scroll" href="#four">Who can I contact if I have any questions about one of your advertised positions?</a></li> 
    <li><a class="scroll" href="#five">How will I know if my application for a position with you is successful?</a></li> 
    <li><a class="scroll" href="#six">How do I find out the salary range of a position you have advertised?</a></li> 
    <li><a class="scroll" href="#seven">Do you offer psychology supervision for new graduates?</a></li> 
    <li><a class="scroll" href="#eight">Are you able to provide sponsorship for my visa?</a></li> 
</ol> 

<p><a id="one" name="one"></a></p> 

<p><strong>How do I apply to work with you? 
</strong><em><br> 
All vacancies are advertised through the Current Vacancies section of our website. If you wish to express a general interest in working with us, we highly recommend you </em><a href="https://www.livehire.me/join/ors/careers"><em>join our Live Hire Talent Community</em></a><em>. We always have new opportunities, and will always look to our talent community before advertising. The best way to be at the front of the line for future and current vacancies is to take a moment to create a private web resume and join our livehire talent community.</em><a id="two" name="two"></a></p> 

<p><strong>Do I need to address selection criteria?</strong><u> <br> 
</u> 
<em>No, you are not required to address any specific selection criteria to apply for a job.</em><a id="three" name="three"></a></p> 

<p><strong>Is there a closing date for applications for your positions? </strong><em><br> 
Most positions do not have a specific closing date, however some can be filled quite quickly, so we suggest you submit your application as early as possible.</em><a id="four" name="four"></a></p> 

<p><strong>Who can I contact if I have any questions about one of your advertised positions?</strong><em><br> 
You can contact our recruitment team at any time via </em><a href="mailto:[email protected]">[email protected]</a> <a id="five" name="five"></a></p> 

<p><strong>How will I know if my application for a position with you is successful?</strong><a href="http://www.orsgroup.com.au/faq/how-will-i-know-if-my-application-is-successful/"><br> 
</a><em>If you are shortlisted for an interview, you will receive a request to complete a recruitment assessment within 4 weeks of submitting your application. Due to the high volume of applications we receive, if you have not heard back from us within 4 weeks, you have been unsuccessful for the position.</em><a id="six" name="six"></a></p> 

<p><strong>How do I find out the salary range of a position you have advertised?</strong><a href="http://www.orsgroup.com.au/faq/how-do-i-find-out-the-salary-range-of-a-position/"><br> 
</a><em>We pay above award rates for all positions. Unfortunately our recruitment team are unable to give you an exact range as it is dependent on the skills, experience and qualifications of the successful applicant.</em><a id="seven" name="seven"></a></p> 

<p><strong>Do you offer psychology supervision for new graduates?</strong><a href="http://www.orsgroup.com.au/faq/do-you-offer-psychology-supervision-for-new-graduates/"><br> 
</a><em>Yes, we offer supervision arrangements, often as part of your offer of employment. You will need to discuss this with the hiring manager.</em><a id="eight" name="eight"></a></p> 

<p><strong>Are you able to provide sponsorship for my visa?</strong><br> 
<em>This is highly dependent on the position you are applying for, your skills, qualifications and experience and your location. If you require sponsorship, please make this clear in your application or email <a href="mailto:[email protected]">[email protected]</a></em></p> 

Однако всякий раз, когда какой-либо из звеньев щелкнул, браузер не прокрутить, это прыгает.

При щелчке по ссылкам я хочу, чтобы браузер прокручивался до метки привязки.

JSfiddle.

Помогите оценить.

+1

почему вы пишете 'jQuery' вместо' '$? – Alex

+0

@Alex, потому что Wordpress требует этого. '$' зарезервирован для Wordpress. – Steve

+1

затем сделайте обертку. это не хороший код! – Alex

ответ

0

ли это для вас: https://jsfiddle.net/xox4ooaL/2/

Я изменил функциональность JS немного, и отрезать часть всех ссылок и прочее, чтобы дать вам общее представление о том, как она могла бы работать, используя данных- атрибутов. также $ doesen't работу в Wordpress, как вы сказали сами, но при работе в Wordpress обернуть функцию, как:

jQuery(document).ready(function($){ 
    // Do stuff 
}); 
Смежные вопросы