2015-06-14 9 views
7

काम नहीं कर रहा: http://i333180.iris.fhict.nl/p2_vc/जावास्क्रिप्ट SmoothScroll फिर भी अपनी साइट पर काम कर रहे

ते पेज नीचे नेविगेट के लिए एक बटन है, कार्रवाई तत्काल है, लेकिन आसान स्क्रॉलिंग बहुत अच्छे है।

तो, मैं चारों ओर गूगल, बहुत कोशिश की और कम से कम स्क्रिप्ट मैंने पाया पर यह है: लेकिन मैं यह काम कर रहा प्राप्त नहीं कर सकते।

$(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; 
      } 
     } 
     }); 
    }); 

रेफरी: https://css-tricks.com/snippets/jquery/smooth-scrolling/

यह मैं कैसे

के बीच मेरे कोड को जोड़ा गया है
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <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> 
    </head> 

बटन:

<body> 
    <a id='button_down' href='#section' onclick="document.getElementById('moodvideo').pause()"><img src='scroll.png' alt='Scroll'></a> 
</body> 

मैं उदाहरण साइट डायन दिया गया था का निरीक्षण किया और यह जोड़ा उसी तरह से मेरे एचटीएमएल के लिए। रेफरी लिंक का निरीक्षण: https://css-tricks.com/examples/SmoothPageScroll/ लेकिन मैं नहीं कर सकते यह काम कर रहा ..

यह भी सुनिश्चित, मैं एक अन्य स्क्रिप्ट, चुड़ैल, एक ही कार्रवाई की जरूरत है एक वीडियो के अंत के बाद की है। उस के लिए स्क्रिप्ट है:

<script> 
     function videoEnded() { 
      window.location.href="#section"; 
     } 
    </script> 

यह एक ही बात करने के लिए है; अच्छी तरह से स्क्रॉल करें।

मुझे उम्मीद थी कि मैंने समझ में समझाया है, अगर नहीं, तो मैं इसे फिर से कोशिश करना चाहता हूं। सादर

संपादित स्क्रिप्ट नहीं है ऑनलाइन साइट के लिए जोड़ा क्योंकि स्क्रिप्ट अभी तक काम कर नहीं है, अगर यह यह easer मैं इसे ऑनलाइन जोड़ सकते हैं होगा।

अद्यतन साइट <script> का यह टुकड़ा बेहतर है काम नहीं कर रहा लिपियों

उत्तर

2

स्क्रिप्ट अपने लाइव प्रतिलिपि पर लिंक के रूप में इरादा पर काम करता है, तो मैं आपको लगता है कि आपका videoEnd() फ़ंक्शन का मतलब है।

आपको मिली चिकनी स्क्रॉलिंग स्क्रिप्ट केवल एंकर टैग (<a>) के लिए काम करती है।

window.location.href = "#section" एक एंकर टैग नहीं है, यह स्क्रिप्ट से प्रभावित नहीं होगा।

हालांकि आप क्या कर सकते हैं, उस स्क्रिप्ट के महत्वपूर्ण बिट्स लेते हैं और इसे आपके videoEnd() फ़ंक्शन में उपयोग करते हैं।

function videoEnded() { 
 
    $('html,body').animate({ 
 
     scrollTop: $("#section").offset().top 
 
    }, 1000); 
 
}

संपादित करें:

कारण यह आप के लिए काम नहीं कर रहा है, क्योंकि आप file:// प्रोटोकॉल और स्क्रिप्ट स्रोत है जो करने के लिए jQuery है लिंक का उपयोग कर पेज ब्राउज़ कर रहे हैं

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

जोका उपयोग करता हैसापेक्ष योजना, जिसका अर्थ है कि ब्राउज़र वर्तमान ब्राउज़िंग योजना में संलग्न कर देगा, यह इस में तब्दील हो ..

file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

कौन मौजूद नहीं है। यदि आप http:// निर्दिष्ट करते हैं तो यह

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
काम करेगा
0

साथ ऑनलाइन है:

$(document).ready(function() { 
    $("a[href*='#']").on("click", function(event) { 
     event.preventDefault(); 
     var href = event.target.href; 
     href = href.slice(href.indexOf("#"), href.length); 
     $("body").animate({ 
      scrollTop: $(href).get(0).offsetTop 
     }, 1000); 
    }); 
}); 
संबंधित मुद्दे