Выделите якорь на главной странице с другой страницы - PullRequest
Новая
       8

Выделите якорь на главной странице с другой страницы

0 голосов
/ 27 декабря 2018

У меня есть веб-сайт Wordpress с пользовательскими пунктами меню:

  • About has link #about
  • Города имеют ссылку #cities
  • Практическая информация идет кдругая страница.

Все ссылки # прокручиваются до определенного блока на главной странице.Но когда я нахожусь на странице практической информации, мой URL-адрес url.be/practical-info/ Поэтому, когда я пытаюсь нажать «О», URL-адрес url.be/practical-info/#about, и, очевидно, выигралне работает.

Мое решение было бы, если бы я щелкнул пункт меню с # в нем, добавить базовый URL веб-сайта перед ним?Или есть лучший способ справиться с этой проблемой?

Я уже получил это в jQuery: 

    //anchor links
    jQuery('a.nav-link[href^="#"]').on('click', function(event) {

        // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "") {

          // Store hash
          var hash = this.hash;

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 2000, function() {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
          return false;
      } // End if
    });

Или это для каждого, который заменяет значения href из # ссылки: 

    jQuery("a[href^='\#']").each(function(){ 
        //this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
        var getUrl = window.location;
        var baseurl = getUrl.origin;
        var hash = this.href.substr(this.href.indexOf('#')+1);
        var fullurl = baseurl + '#' + hash;

        this.attr('href', fullurl);
        console.log(this);
    });

Но и этот не работает и выдает ошибку.

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018 
if (window.location.hash)
    scroll(0,0);
setTimeout(function(){scroll(0,0);},1);

$(function(){
$('.scroll').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({
        scrollTop:$($(this).attr('href')).offset().top + 'px'
    },1000,'swing');
});


if(window.location.hash){
    // smooth scroll to the anchor id
    $('html,body').animate({
        scrollTop:$(window.location.hash).offset().top + 'px'
        },1000,'swing');
    }
});
0 голосов
/ 27 декабря 2018

Вы добавляете атрибут к неправильной вещи.В $(this) jQuery есть функция .attr(), а в нативном this нет.

(я добавил немного CSS в фрагмент, чтобы было легче увидеть пример.) 

jQuery("a[href^='\#']").each(function() {
      var getUrl = window.location;
      var baseurl = getUrl.origin;
      var hash = this.href.substr(this.href.indexOf('#') + 1);
      var fullurl = baseurl + '#' + hash;
    
      $(this).attr('href', fullurl);
      // ^ needs to be $(this), not this. You can also use this.href = fullurl;  
    });
a {
  display: block;
}
a[href*='#']:after {
  content: " (" attr(href) ")";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="other-stuff">Other Stuffs</a>
...