Как я могу предотвратить, чтобы мои якоря так сильно прыгали по экрану?

Я решил попробовать создать меню с вкладками, используя только CSS и HTML. Используя псевдокласс :target, чтобы показать соответствующий div, я реализовал его, только он прыгает слишком много, чтобы быть удобным для пользователя:

Http://brad.sebdengroup.com/newodynsite/stockman.php#StockControl

Могу ли я это исправить? Изначально я хотел держаться подальше от JavaScript, но я с радостью добавлю некоторые, если это исправит это.

Примечание: Я знаю, что могу восстановить новое меню с вкладками используя jQuery/какую-то причудливую библиотеку, но если это возможно, я бы предпочел исправить это.

8 3
javascript css pseudo-class anchor fragment-identifier

8 ответов:

Это потому, что вы используете хэш-значение в ваших якорях. Они заставляют его перейти к div с идентификатором, указанным хэшем.

Для сортировки этого вы можете использовать jQuery, чтобы остановить прыжки с помощью .preventDefault();

Вы бы использовали это, дав каждому якорю, который прыгает, класс prevent, а затем используя jQuery, чтобы остановить прыжки. Конечно, вы можете изменить этот селектор в зависимости от вашей структуры html.

$(".prevent").click(function(e) { //Note the e for event
  e.preventDefault();
});

Редактировать без jQuery

После проклятия не имея jQuery для работы с я попытался собрать чистое решение js. Вам нужно будет проверить это, чтобы убедиться, что он работает на Вашей странице.

Вот пример jsfiddle .

Я нашел все якоря на странице, а затем добавил return false в их атрибут onclick. Если это должно было пойти на вашем живом сайте, вам нужно будет дополнительно выбрать якоря, смотрите этот пример и объяснение:

Я также добавил класс к якорям, которые вы не делаете хочется прыгать. Для этого вам нужно будет добавить класс "menuControl" к любому якорю, который вы хотите прекратить прыгать.

Ниже приведен мой JavaScript, в котором ссылка jsfiddle нарушена. Просто упомяну, что теперь вам нужно будет управлять навигацией этих вкладок с помощью JavaScript, так как использование return false остановит навигацию.

var anchors = document.getElementsByTagName("a");

for(var i = 0; i < anchors.length; i++) {
    if ( anchors[i].className == "menuControl" ) {
        anchors[i].setAttribute("onclick", "return false");
    }
} ​
8

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

Docs

Для горизонтального перехода вы можете использовать overflow-y: scroll на своем теле, чтобы полоса прокрутки всегда была на странице, даже если содержимого недостаточно для прокрутки.

2

Вы можете установить минимальную высоту страницы на высоту, необходимую для перемещения div в верхнюю часть с помощью css.

body { min-height: 1000px; }

Замените 1000px на столько px, сколько вам нужно.

Это предотвратит все прыжки за пределы начального щелчка, который делает вид браузера целевым для div.

Это было бы похоже на щелчок обработка заказов на продажу, а затем щелчок обработка заказов на работу, как это происходит сейчас. Если вы не хотите, чтобы все лишние пробелы на странице загружались, вы можете установить только высоту при щелчке по вкладкам.

2

Я бы использовал jQuery, чтобы сделать его прокрутку плавной. Здесь есть хорошая демонстрация .

1
$(window).scroll(function () { 
       var newTop = $(window).scrollTop();
       if (newTop <= 130){
            newTop = 130;
       }
       $("#idofElementToScroll").stop()
       .animate({'top': newTop}, "slow");
});

Это функция, которую я написал и реализовал в приватном разделе на своем персональном сайте.

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

Я знаю, что вы просили о перемещении якорей, но вы можете очень легко приспособить эту функцию к этой цели.

Пожалуйста, обратите внимание, что "130" относится к минимальному расстоянию, которое я хотел, чтобы движущийся элемент находился в верхней части окна.

Удачи!

1

У вас есть проблема, потому что высота вашего контейнера очень отличается.

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

1

Используйте селектор sibling с целевым псевдоклассом, чтобы избежать этой проблемы, следуя примеру Stu Nicholls, но остерегайтесь ошибки Webkit: 

<!doctype html>
<html lang="en">
<head>
    <title>CSS Target Navigation</title>
    <style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-page-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#cssplayPages {width:690px; height:400px; position:relative; margin:20px auto;}
#cssplayPages #navigate {padding:0; margin:35px 0 0 0; list-style:none; width:160px; text-align:right; float:left;}
#cssplayPages #navigate li {float:left; width:160px; margin:0 0 5px 0;}
#cssplayPages #navigate li a {display:block; width:140px; padding:0 10px; background:#ddd; font:bold 13px/35px arial, sans-serif; text-decoration:none; color:#000; border-radius:5px;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#cssplayPages #navigate li a:hover {background:#6cf;}

#cssplayPages #navigate.john a {background:#6cf;}

.targets {display:none;}
#cssplayPages div {position:absolute; width:0; left:190px; top:0; opacity:0; height:0px; overflow:hidden;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
-o-transition: 1.5s;
-webkit-transition: 1.5s;
transition: 1.5s;
}
#cssplayPages div.constable {height:400px; width:500px; opacity:1;}

#cssplayPages div img {float:left; padding:0 10px 10px 0;}
#cssplayPages div h2 {padding:0 0 10px 0; margin:0; font: 24px/24px arial, sans-serif;}
#cssplayPages div p {padding:0 0 10px 0; margin:0; font: 13px/18px arial, sans-serif; text-align:justify;}


#constable:target ~ #navigate .john a {background:#6cf;}
#constable:target ~ .constable {height:400px; width:500px; opacity:1;}

#monet:target ~ #navigate .claude a {background:#6cf;}
#monet:target ~ #navigate .john a {background:#ddd;}
#monet:target ~ #navigate .john a:hover {background:#6cf;}
#monet:target ~ .constable {height:0; width:0; opacity:0;}
#monet:target ~ .monet {height:400px; width:500px; opacity:1;}

#vangogh:target ~ #navigate .vincent a {background:#6cf;}
#vangogh:target ~ #navigate .john a {background:#ddd;}
#vangogh:target ~ #navigate .john a:hover {background:#6cf;}
#vangogh:target ~ .constable {height:0; width:0; opacity:0;}
#vangogh:target ~ .vangogh {height:400px; width:500px; opacity:1;}

#chagall:target ~ #navigate .marc a {background:#6cf;}
#chagall:target ~ #navigate .john a {background:#ddd;}
#chagall:target ~ #navigate .john a:hover {background:#6cf;}
#chagall:target ~ .constable {height:0; width:0; opacity:0;}
#chagall:target ~ .chagall {height:400px; width:500px; opacity:1;}

#picasso:target ~ #navigate .pablo a {background:#6cf;}
#picasso:target ~ #navigate .john a {background:#ddd;}
#picasso:target ~ #navigate .john a:hover {background:#6cf;}
#picasso:target ~ .constable {height:0; width:0; opacity:0;}
#picasso:target ~ .picasso {height:400px; width:500px; opacity:1;}
</style>

</head>
<body>
    <div id="cssplayPages">
    <b class="targets" id="constable"></b>
    <b class="targets" id="monet"></b>
    <b class="targets" id="vangogh"></b>
    <b class="targets" id="chagall"></b>
    <b class="targets" id="picasso"></b>
    <ul id="navigate">
        <li class="john"><a href="#constable" onClick="history.go(1)">John Constable &#9755;</a></li>
        <li class="claude"><a href="#monet" onClick="history.go(1)">Claude Monet &#9755;</a></li>
        <li class="vincent"><a href="#vangogh" onClick="history.go(1)">Vincent Van Gogh &#9755;</a></li>
        <li class="marc"><a href="#chagall" onClick="history.go(1)">Marc Chagall &#9755;</a></li>
        <li class="pablo"><a href="#picasso" onClick="history.go(1)">Pablo Picasso &#9755;</a></li>
    </ul>
    <div class="constable">
        <h2>John Constable</h2>
        <img src="painters/constable2.jpg" alt="The Hay Wain" title="The Hay Wain" />
        <p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
        <p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
        <p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p>
        <p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
        <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The&nbsp;WebMuseum,&nbsp;Paris</a></p>
    </div>
    <div class="monet">
        <h2>Claude Monet</h2>
        <img src="painters/monet2.jpg" alt="Women in the Garden" title="Women in the Garden" />
        <p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
        <p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p>
        <p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p> 
        <p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Mus&#233;e d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
        <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The&nbsp;WebMuseum,&nbsp;Paris</a></p>
    </div>
    <div class="vangogh">
        <h2>Vincent Van Gogh</h2>
        <img src="painters/vincent2.jpg" alt="The Starry Night" title="The Starry Night" />
        <p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
        <p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">C&#233;zanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The&nbsp;Starry&nbsp;Night</a> (1889).</p> 
        <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The&nbsp;WebMuseum,&nbsp;Paris</a></p>
    </div>
    <div class="chagall">
        <h2>Marc Chagall</h2>
        <img src="painters/chagall2.jpg" alt="Adam and Eve" title="Adam and Eve" />
        <p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
        <p>Very early in life he was encouraged by his mother to follow his vocation and she managed to get him into a St Petersburg art school. Returning to Vitebsk, he became engaged to Bella Rosenfeld (whom he married twelve years later), then, in 1910, set off for Paris, 'the Mecca of art'.</p>
        <p>He was a tenant at La Ruche, where he had Modigliani and Soutine for neighbours. His Slav Expressionism was tinged with the influence of <a href="http://www.artchive.com/artchive/D/daumier.html">Daumier</a>, Jean-Fran&#231;ois Millet, the Nabis and the Fauves.</p>
        <p>He was also influenced by <a href="http://www.artchive.com/artchive/cubism.html">Cubism</a>. Essentially a colourist, Chagall was interested in the Simultaneist vision of Robert Delaunay and the Luminists of the Section d'Or.</p>
    </div>
    <div class="picasso">
        <h2>Pablo Picasso</h2>
        <img src="painters/picasso2.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
        <p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>
        <p>The small Museo de Picasso in Barcelona is devoted primarily to his <a href="http://www.artchive.com/artchive/P/picasso_early.html">early works</a>, which include strikingly realistic renderings of casts of ancient sculpture.</p>
        <p>He was a rebel from the start and, as a teenager, began to frequent the Barcelona cafes where intellectuals gathered.</p>
        <p>He soon went to Paris, the capital of art, and soaked up the works of Manet, Gustave Courbet, and <a href="http://www.artchive.com/artchive/T/toulouse-lautrec.html">Toulouse-Lautrec</a>, whose sketchy style impressed him greatly. Then it was back to Spain, a return to France, and again back to Spain - all in the years 1899 to 1904.</p>
    </div>
</div>

            <p class="info">copyright &copy; stu nicholls - CSS play</p>

        </div> <!-- end info -->

</body>
</html>
0

Вот еще одно предложение: 

<style>
    nav ~ div {
        display: none;
    }

    .tab {
        position:fixed;
        top:0;
    }

    :target:not([id="box1"]) ~ .box1 {
        display: none;
    }

    #box1:target ~ nav .box1,
    #box2:target ~ nav .box2,
    #box3:target ~ nav .box3 {
        color:red;
    }

    #box1:target ~ div.box1,
    #box2:target ~ div.box2,
    #box3:target ~ div.box3 {
        display:block;
    }
</style>

<section id="content">
    <div id="box1" class="tab"></div>
    <div id="box2" class="tab"></div>
    <div id="box3" class="tab"></div>
    <nav>
         <a href="#box1" class="box1">box1</a>
         <a href="#box2" class="box2">box2</a>
         <a href="#box2" class="box3">box3</a>
    </nav>
    <div class="box1">
         blah
    </div>
    <div class="box2">
         blah
    </div>
    <div class="box3">
         blah
    </div>
</section>

Это должно сделать трюк, поскольку якоря закреплены. Он может прыгнуть один раз, но больше не прыгнет.

0