0

Есть кнопка, которая ведет на страницу портфолио, после клика, хочу перенаправить пользователя на элемент с конкретным id.


Вот кнопка (на странице main.html)

<a ng-href="#/portfolio#brif">
    <div class="ibtn" >
        <svg>
           <rect x="0" y="0" fill="none" width="166" height="45" />
        </svg>
            Заполнить бриф
    </div>
</a>

Вот элемент, на который ссылаюсь (страница porfolio.html)

<section class="wrapp_content brif_na dark_blue" id="brif">
  <ng-include src="'template/form.html'"></ng-include>
</section>

Вот приложение, на котором можно посмотреть что я имею ввиду (т.е. при загрузке, если нажать на "заполнить бриф" - перенесет на самый верх страницы "наши услуги", вернувшись на главную и повторив действие, сошлется уже на ID, видимо ng-include не успевает загрузиться в первый раз.


Но если попробовать вставить такой код в controller.js

remindApp.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

А саму ссылку заменить на:

<a ng-href="#portfolio?scrollTo=brif" >

То возникает странное поведение, переход осуществляется и даже стремится к нужному месту, но не доходит до конца - вот скрины:

ПРИ ПЕРВОМ ПЕРЕХОДЕ


ПРИ ПЕРВОМ ПЕРЕХОДЕ

ПРИ ВТОРОМ ПЕРЕХОДЕ


ПРИ ВТОРОМ ПЕРЕХОДЕ

P/S: Конечно можно и не ссылаться на ng-include и писать что-нить другое, но хочется разобраться с поведением, не понимаю почему есть разница между первым и вторым способом и как сказать ng-href, чтобы срабатывала после ng-include. Заранее спасибо за терпение

8
  • добавьте рабочий пример на plunkr, в котором бы вопсроизводилась ваша проблема
    – Grundy
    6 янв 2016 в 14:14
  • @gundy, К сожалению, не знаю как создать 2 страницы на plunkr. чтобы отабразить проблему нужно 2 страницы 6 янв 2016 в 14:22
  • там в меню слева есть new file пункт
    – Grundy
    6 янв 2016 в 14:23
  • 2
    Если я правильно понял интересует скролл к якорю? Может быть поможет $anchorScroll 6 янв 2016 в 19:35
  • 1
    Тогда предлагаю самому разместить ответ.
    – Qwertiy
    6 янв 2016 в 22:31

3 ответа 3

1

все решалось гораздо проще, нужно все это оборачивать в div, а этому div присваивать min-height в ссs - костыли, но действительно простой способ

0

Чтобы перейти по якорю, нужно добавить в адрес якорь

<a ng-href="#/portfolio#brif">

Plunkr

Ну и как подсказал @MichaelRadionov перейти можно и вручную используя $anchorScroll

Но так как автоматический переход по якорю включен по умолчанию, можно обходиться и без прямого вызова.

0
<a ng-href="'#/portfolio/'+brif">
1
  • данный подход не сработает, так как нужен не просто переход к адресу portfolio, но и дальнейший переход по якорю brif - а для этого надо указать, что это именно якорь
    – Grundy
    6 янв 2016 в 20:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.