ссылка на якорь внизу страницы - PullRequest
Новая
       4

ссылка на якорь внизу страницы

3 голосов
/ 18 августа 2011

Я делаю некоторую документацию, где я интенсивно использую якоря для связи между страницами в вики.

см. Здесь:

http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures

Функцияэто действительно делает эту работу хорошо, когда браузер показывает привязку в абсолютной верхней части панели.Когда это сбивает с толку, когда ссылка на якорь показывает якорь на полпути вниз по странице, поскольку страница прокручивается вниз полностью

см. Здесь:

http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227

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

Ответы [ 5 ]

9 голосов
/ 18 августа 2011

Поместить пустое изображение внизу вашей страницы - плохая идея, поскольку оно увеличит ваш документ до ненужной высоты.

Вы могли бы добавить некоторый javascript, чтобы применить эффект к якору, к которому вы только что отправились, чтобы выделить его там, где он есть.

1 голос
/ 27 августа 2011

Без изменения высоты вашего документа (т. Е. Добавления дополнительных отступов внизу) у вас всегда будет эта проблема.

Однако, используя бит JS / jQuery, пользовательский интерфейс может быть значительно улучшено:

При щелчке по названному якору:

  • Вместо того, чтобы прыгать во флэш (поведение по умолчанию), добавьте плавную прокрутку
  • addвыделение для обозначения текущего выбора (это очень помогает во 2-м случае, поскольку пользователь может ясно видеть, что является текущим)

Создан демонстрационный пример для иллюстрации концепций: http://jsfiddle.net/mrchief/PYsyN/9/

CSS 

<style>
    .current { font-weight: bold; }
</style>

JS 

function smoothScroll(elemId) {
    // remove existing highlights
    $('.current').css({backgroundColor: "transparent"}).removeClass('current');

    var top = $(elemId).offset().top;

    // do a smooth scroll
    $('html, body').animate({scrollTop:top}, 500, function(){
        // add an highlight
        $(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
            // keep tab of current so that style can be reset later
            $(elemId).addClass('current');
        });
    });

}

// when landing directly
if (document.location.hash) {
    smoothScroll(document.location.hash);
}
$('a[href*=#]').click(function() {
    // utilizing the fact that named acnhor has a corresponding id element
    var elemId = $(this).attr('href');
    smoothScroll(elemId);
});
1 голос
/ 25 августа 2011

Вы можете создать абсолютный псевдоэлемент с большой высотой до целевого блока, используя только следующий CSS (для второй ссылки в вашем посте: 

#nums td:target a::before {
    content: '';
    position: absolute;
    height: 700px;
}

Высота должна быть около высотыобласть просмотра, поэтому лучшим решением будет создание этих стилей на лету с использованием js. Но если вы не хотите использовать js, просто используйте height: 1000px или более - если вы не возражаете против пробела внизуконечно.

Самая лучшая часть: это всего лишь CSS, и не было бы пробела, если якоря не нацелены.

Edit : просто заглянуть в будущееесли бы единицы vw / vh пришли в другие браузеры (теперь это только в IE9), это можно было бы сделать просто CSS, используя height: 100vh:)

0 голосов
/ 26 августа 2011

Я бы, вероятно, использовал для этого комбинацию jQuery и PHP:
PHP (где-то сразу после вашего <body> элемента): 

<?php
    $anchor = explode('#', $_SERVER['REQUEST_URI']);
    $anchor = $anchor[1];
    echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>

А затем jQuery: 

<script type="text/javascript">
    $(function(){
        $('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
    });
</script>

Надеюсь, это поможет.

0 голосов
/ 22 августа 2011

Вы могли бы использовать Javascript / jQuery для создания белого div, который имеет необходимую высоту, необходимую для размещения вашего элемента в верхней части окна браузера, и вы можете даже удалить его при прокрутке.

Однако я настоятельно рекомендую не делать этого, поскольку это расширит вашу страницу там, где она не нужна.Гораздо умнее просто стилизовать тег при переходе туда (через Javascript / jQuery), чтобы он появлялся у зрителя, например, установив жирным шрифтом font-weight или изменив background-color.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...