2015-06-14 2 views
7

Все еще работает на моем сайте: http://i333180.iris.fhict.nl/p2_vc/Javascript smoothscroll не работает

Существует кнопка для перемещения вниз ТЭ, действие происходит мгновенно, но плавный скроллинг намного лучше.

Итак, я google вокруг, много пробовал, и самый короткий скрипт, который я нашел, это: Но я не могу заставить его работать.

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

Ref: 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> 

Я осмотрела пример сайта ведьма была дана и добавить его так же, как и в моем html. Ref осмотрены ссылка: https://css-tricks.com/examples/SmoothPageScroll/ Но я не могу сделать это работает ..

Кроме того, у меня есть другой сценарий, ведьма нуждается в то же самое действие, после окончания видео. Скрипт, который в настоящее время:

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

Это должно сделать то же самое; прокручивайте.

Я надеялся, что объясню это понятным, если нет, я бы хотел попробовать еще раз. С уважением

EDIT сценарий разве добавлен в интернет-сайт, потому что сценарий Isnt работает еще, если он сделает это вспомогательная скважина я мог бы добавить его в Интернете.

обновление сайт в Интернете с не работают скрипты

ответ

2

Скрипт работает по ссылкам на вашей живой копии, как задумано, так что я верю тебе означает ваш videoEnd() функция.

Скрытый скрипт прокрутки, который вы нашли, работает только для якорных тегов (<a>).

Поскольку window.location.href = "#section" не является привязным тегом, на него не повлияет скрипт.

Однако вы можете использовать важные бит этого скрипта и использовать его в своей функции videoEnd(), как это делается.

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

EDIT:

Причина это не работает для вас, потому что вы просматриваете страницы, используя протокол 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

Эта часть <script> намного лучше:

$(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); 
    }); 
}); 
Смежные вопросы