Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2018, 18:20
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Не получается сделать прокрутку к якорю с сторонних страниц
Здравствуйте!
На главной странице есть блок с id "test". Хочу сделать на него переход с "прокруткой" из главного меню. Добавил скрипт:
jQuery('a.scroll').click(function() {
        jQuery("html, body").animate({
            scrollTop: jQuery(jQuery(this).attr('href')).offset().top + "px"
        }, {
            duration: 500
        });
        return false;
    });

Если ставлю в меню ссылку "#test" - то на главной все красиво работает, на остальных, естественно, нет (т.к. этот якорь только на главной)... Если ставлю ссылку вида "http://site/#test" - прокрутка не работает... Что делать?
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2018, 18:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

Указывайте ссылку относительно корня: /#test
$('a.scroll').click(function(e) {
    e.preventDefault();

    $("html, body").animate({
        scrollTop: $('#' + $(this).attr('href').split('#').pop()).offset().top + "px"
    }, 500);
});

Последний раз редактировалось Nexus, 18.07.2018 в 19:30.
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2018, 18:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

переход к якорю при открытии страницы
Сообщение от Igorsrt
Что делать?
добавить в строку 9
var hash = window.location.hash;
hash && jQuery("a[href='"+hash+"']").click();
Ответить с цитированием
  #4 (permalink)  
Старый 18.07.2018, 20:34
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от рони Посмотреть сообщение
добавить в строку 9
var hash = window.location.hash;
hash && jQuery("a[href='"+hash+"']").click();
..что-то не получается.. ((
Ответить с цитированием
  #5 (permalink)  
Старый 18.07.2018, 20:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Igorsrt,
ссылку в личку
Ответить с цитированием
  #6 (permalink)  
Старый 18.07.2018, 23:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

... браузер автоматом прокручивает к блоку, предложенный вариант "прокрутки" при загрузке страницы не помог, по словам ТС ... может у кого есть свои соображения.
jQuery('a.scroll').click(function() {
        jQuery("html, body").animate({
            scrollTop: jQuery(jQuery(this).attr('href')).offset().top + "px"
        }, {
            duration: 500
        });
        return false;
    });

jQuery(window).on('load', function() {
var hash = window.location.hash;
hash && window.setTimeout(function() {
window.scrollTo(0,0);
jQuery("a[href='"+hash+"']").click()
},80)

})
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2018, 08:57
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Может просто другой скрипт поставить? Если сайт без jquery, то я использую скрипт ниже. Его достаточно. Переходит с любой страницы к любому якорю. На всех страницах скролл плавный. Кроме перехода к якорю с другой страницы. Там просто бросает к нему.
var linkNav = document.querySelectorAll('[href^="#"]'),
    V = 1;
  for (var i = 0; i < linkNav.length; i++) {
    linkNav[i].addEventListener('click', function(e) {
      e.preventDefault();
      var w = window.pageYOffset,
        hash = this.href.replace(/[^#]*(.*)/, '$1');
      t = document.querySelector(hash).getBoundingClientRect().top,
        start = null;
      requestAnimationFrame(step);

      function step(time) {
        if (start === null) start = time;
        var progress = time - start,
          r = (t < 0 ? Math.max(w - progress / V, w + t) : Math.min(w + progress / V, w + t));
        window.scrollTo(0, r);
        if (r != w + t) {
          requestAnimationFrame(step)
        } else {
          location.hash = hash
        }
      }
    }, false);
  }
Ответить с цитированием
  #8 (permalink)  
Старый 19.07.2018, 08:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от madeas
Переходит с любой страницы к любому якорю
где код?
Ответить с цитированием
  #9 (permalink)  
Старый 19.07.2018, 09:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

madeas,
вопрос не в том как перейти к якорю, а наоборот как отменить переход к якорю при открытии страницы и заменить на кастомный, будет это на jquery или нет неважно, анимация она и в jquery сейчас на requestAnimationFrame.

Последний раз редактировалось рони, 19.07.2018 в 09:07.
Ответить с цитированием
  #10 (permalink)  
Старый 19.07.2018, 09:05
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

http://jsfiddle.net/qpfysknL/
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Я новичок, не получается сделать прогресс проигрывания видео Curly_Sue1234 Элементы интерфейса 1 06.10.2012 17:43
Не получается сделать условие NeoMurderer jQuery 6 03.08.2011 13:29
dataTables + jeditable не получается сделать поля редактируемыми alekslkta Элементы интерфейса 0 02.05.2011 16:17
dataTables + jeditable не получается сделать поля редактируемыми alekslkta jQuery 0 01.05.2011 23:53
Не получается сделать редирект ... autobuh Общие вопросы Javascript 1 23.12.2008 17:17