Якорная бирка не работает через другую страницу

Question

Я создал сайт, используя основание и php. На моем index.html я использую функцию прокрутки элемента, чтобы перейти к различным разделам моей страницы.

на моей странице php Я хотел настроить свои ссылки навигации так, чтобы они ссылались на их соответствующий раздел на index.html, и я думал, что это будет легко с помощью якорных тегов. однако мои ссылки связаны только с первыми (# секундными) ссылками через правильно, остальные идут прямо в нижней части страницы index.html.

Я искал, и я не могу найти, почему только один будет работать, а не другие, есть ли что-то, что мне не хватает? Вот мой код

// Код

//Target Section in index.html 

    <div class="row"> 
     <div class="large-8 column large-centered" id="third" data-magellan-target="third"> 
      <h2 class="heading">Location</h2> 
      <div class="border"> 
       <div id="map"> 
        <!--Map Location--> 
       </div> 
      </div> 

     </div> 
    </div> 

//navigation on php page 

       <div class="top-bar-right"> 
        <ul class="menu vertical medium-horizontal nav" data-responsive-menu="drilldown medium-dropdown" data-magellan> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="#">Sales</a></li> 
         <li><a href="#">Lettings</a></li> 
         <li><a href="index.html#second">Gallery</a></li> 
         <li><a href="index.html#third">Location</a></li> 
         <li><a href="index.html#fourth">Contact Us</a></li> 
        </ul> 
       </div> 

Cory это код для прокрутки Feauture

/** 
* Magellan module. 
* @module foundation.magellan 
*/ 
!function(Foundation, $) { 
    'use strict'; 

    /** 
    * Creates a new instance of Magellan. 
    * @class 
    * @fires Magellan#init 
    * @param {Object} element - jQuery object to add the trigger to. 
    * @param {Object} options - Overrides to the default plugin settings. 
    */ 
    function Magellan(element, options) { 
    this.$element = element; 
    this.options = $.extend({}, Magellan.defaults, this.$element.data(), options); 

    this._init(); 

    Foundation.registerPlugin(this); 
    } 

    /** 
    * Default settings for plugin 
    */ 
    Magellan.defaults = { 
    /** 
    * Amount of time, in ms, the animated scrolling should take between locations. 
    * @option 
    * @example 500 
    */ 
    animationDuration: 500, 
    /** 
    * Animation style to use when scrolling between locations. 
    * @option 
    * @example 'ease-in-out' 
    */ 
    animationEasing: 'linear', 
    /** 
    * Number of pixels to use as a marker for location changes. 
    * @option 
    * @example 50 
    */ 
    threshold: 50, 
    /** 
    * Class applied to the active locations link on the magellan container. 
    * @option 
    * @example 'active' 
    */ 
    activeClass: 'active', 
    /** 
    * Allows the script to manipulate the url of the current page, and if supported, alter the history. 
    * @option 
    * @example true 
    */ 
    deepLinking: false, 
    /** 
    * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar. 
    * @option 
    * @example 25 
    */ 
    barOffset: 0 
    }; 

    /** 
    * Initializes the Magellan plugin and calls functions to get equalizer functioning on load. 
    * @private 
    */ 
    Magellan.prototype._init = function() { 
    var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan'), 
     _this = this; 
    this.$targets = $('[data-magellan-target]'); 
    this.$links = this.$element.find('a'); 
    this.$element.attr({ 
     'data-resize': id, 
     'data-scroll': id, 
     'id': id 
    }); 
    this.$active = $(); 
    this.scrollPos = parseInt(window.pageYOffset, 10); 

    this._events(); 
    }; 
    /** 
    * Calculates an array of pixel values that are the demarcation lines between locations on the page. 
    * Can be invoked if new elements are added or the size of a location changes. 
    * @function 
    */ 
    Magellan.prototype.calcPoints = function(){ 
    var _this = this, 
     body = document.body, 
     html = document.documentElement; 

    this.points = []; 
    this.winHeight = Math.round(Math.max(window.innerHeight, html.clientHeight)); 
    this.docHeight = Math.round(Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)); 

    this.$targets.each(function(){ 
     var $tar = $(this), 
      pt = Math.round($tar.offset().top - _this.options.threshold); 
     $tar.targetPoint = pt; 
     _this.points.push(pt); 
    }); 
    }; 
    /** 
    * Initializes events for Magellan. 
    * @private 
    */ 
    Magellan.prototype._events = function() { 
    var _this = this, 
     $body = $('html, body'), 
     opts = { 
      duration: _this.options.animationDuration, 
      easing: _this.options.animationEasing 
     }; 

    $(window).one('load', function(){ 
     _this.calcPoints(); 
     _this._updateActive(); 
    }); 

    this.$element.on({ 
     'resizeme.zf.trigger': this.reflow.bind(this), 
     'scrollme.zf.trigger': this._updateActive.bind(this) 
    }).on('click.zf.magellan', 'a[href^="#"]', function(e) { 
     e.preventDefault(); 
     var arrival = this.getAttribute('href'), 
      scrollPos = $(arrival).offset().top - _this.options.threshold/2 - _this.options.barOffset; 

     // requestAnimationFrame is disabled for this plugin currently 
     // Foundation.Move(_this.options.animationDuration, $body, function(){ 
      $body.stop(true).animate({ 
      scrollTop: scrollPos 
      }, opts); 
     }); 
     // }); 
    }; 
    /** 
    * Calls necessary functions to update Magellan upon DOM change 
    * @function 
    */ 
    Magellan.prototype.reflow = function(){ 
    this.calcPoints(); 
    this._updateActive(); 
    }; 
    /** 
    * Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled. 
    * @private 
    * @function 
    * @fires Magellan#update 
    */ 
    Magellan.prototype._updateActive = function(/*evt, elem, scrollPos*/){ 
    var winPos = /*scrollPos ||*/ parseInt(window.pageYOffset, 10), 
     curIdx; 

    if(winPos + this.winHeight === this.docHeight){ curIdx = this.points.length - 1; } 
    else if(winPos < this.points[0]){ curIdx = 0; } 
    else{ 
     var isDown = this.scrollPos < winPos, 
      _this = this, 
      curVisible = this.points.filter(function(p, i){ 
      return isDown ? p <= winPos : p - _this.options.threshold <= winPos;//&& winPos >= _this.points[i -1] - _this.options.threshold; 
      }); 
     curIdx = curVisible.length ? curVisible.length - 1 : 0; 
    } 

    this.$active.removeClass(this.options.activeClass); 
    this.$active = this.$links.eq(curIdx).addClass(this.options.activeClass); 

    if(this.options.deepLinking){ 
     var hash = this.$active[0].getAttribute('href'); 
     if(window.history.pushState){ 
     window.history.pushState(null, null, hash); 
     }else{ 
     window.location.hash = hash; 
     } 
    } 

    this.scrollPos = winPos; 
    /** 
    * Fires when magellan is finished updating to the new active element. 
    * @event Magellan#update 
    */ 
    this.$element.trigger('update.zf.magellan', [this.$active]); 
    }; 
    /** 
    * Destroys an instance of Magellan and resets the url of the window. 
    * @function 
    */ 
    Magellan.prototype.destroy = function(){ 
    this.$element.off('.zf.trigger .zf.magellan') 
     .find('.' + this.options.activeClass).removeClass(this.options.activeClass); 

    if(this.options.deepLinking){ 
     var hash = this.$active[0].getAttribute('href'); 
     window.location.hash.replace(hash, ''); 
    } 

    Foundation.unregisterPlugin(this); 
    }; 
    Foundation.plugin(Magellan, 'Magellan'); 

    // Exports for AMD/Browserify 
    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') 
    module.exports = Magellan; 
    if (typeof define === 'function') 
    define(['foundation'], function() { 
     return Magellan; 
    }); 

}(Foundation, jQuery); 

// EDIT //

Я нашел этот вопрос, это было плагин jquery, который я установил, столкнулся с функцией magellan, после того как он удален правильно.

Answer 1

Ваша страница может быть недостаточно длинной для достижения желаемого результата; метки привязки не будут делать то, что они ссылаются на абсолютный верхний элемент страницы, но вместо этого соблюдают границы страниц (у вас недостаточно материала под тегами, прежде чем попасть в нижнюю часть страницы). Я думаю, что если вы добавили несколько сотен пустых р-теги

<p></p> 

в нижней части index.html, а затем попробовал еще раз вы получите желаемый ответ (это хороший тест, а не решение). Может пожелать рассмотреть ящики (скрыть/показать) в качестве альтернативы.

Answer 2

вы можете проверить документацию на фундамент и проверить вкладки и глубокую привязку. Глубокая привязка - это то, что используется для навигации и фокусировки на определенных разделах другой страницы или файла, как это относится к вам. Хотя я только узнал, что глубокая привязка не была показана в F6, но доступна в F5. Если вы хотите реализовать это в F6, вам нужно вручную написать функцию сценария для выполнения задачи.