Как перейти к hrefs h2 для конкретных страниц в JavaScript? - PullRequest
Новая
       9

Как перейти к hrefs h2 для конкретных страниц в JavaScript?

0 голосов
/ 27 октября 2018

Это работает (например, это идентификатор тега h2): 

<script type="text/javascript">
jQuery(document).ready(function($){
    var menubarHeight = 54;
    $('a[href^=#]').on('click', function(e){
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop:$(href).offset().top -menubarHeight }, 1);
    });
});


<script type="text/javascript">
jQuery(document).ready(function($){
    var menubarHeight = 154;
    $('a[href^=#idofh2]').on('click', function(e){
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop:$(href).offset().top -menubarHeight }, 1);
    });
});

Это не работает (я хочуэта функция для всех hrefs из h2 только для этих страниц -> https://example.com/, https://example.com/2.):

<script type="text/javascript">
jQuery(document).ready(function($){
    var menubarHeight = 154;
    $('a[href^=#]').on('click', function(e){
        // Here you can see, that there is h2. I don't know where to place it.
        var href = $(this).attr('h2');
        $('html, body').animate({
            scrollTop:$(href).offset().top -menubarHeight }, 1);
    });
});

Я использую 1, потому что я хочу прыгать, а не плавнопрокрутка. Что я могу использовать вместо .animate?

Если я использую это: 

<script type="text/javascript">
jQuery(document).ready(function($){
    var menubarHeight = 54;
    $('a[href^=#]').on('click', function(e){
        var href = $(this).attr('href');
        $('html, body').css("scrollTop", $(href).offset().top -menubarHeight);
    });
});

, то 54 не работает.

Это: 

$('a[href^=#]')

обычно для 54.

И это: 

$('a[href^=#idofh2]')

- это идентификатор одного тега h2 страницы. Это работает. Но какмогу ли я использовать его для всех тегов h2 и только для страниц https://example.com/, https://example.com/2? Если я перехожу на тег h2, он должен быть 154 (menubarHeight), в противном случае 54.

Ответы [ 3 ]

0 голосов
/ 27 октября 2018

Если вы хотите просто перейти к домену с идентификатором, вы можете назвать его ссылкой 

<a href="#idOfTheDom">Jump</a>

Это не приводит к перезагрузке стороны.

Если я неправильно понял вопрос, предоставьте больше информации. 

<a href="#1">Jump</a>
<div style="height:500px"></div>
<h2 id="1">This is the H2</h2>
<div style="height:500px"></div>
0 голосов
/ 27 октября 2018

Исходя из вашего вопроса, я думаю, что вы хотите установить menuHeight на 154 или 54, в зависимости от того, указывает ли цель href на элемент <h2> или нет.Это когда метод jQuery .is() пригодится.

Итак, вы можете просто использовать метод .is('h2'), чтобы проверить, соответствует ли тэг выбранного узла h2: 

jQuery(document).ready(function($){
    $('a[href^=#]').on('click', function(e){
        var href = $(this).attr('href');

        // Store the target element reference
        var $target = $(href);

        // Check if target element is a <h2> element
        var isTargetH2 = $target.is('h2');

        // Use ternary operators to set menuHeight
        // - If target element is <h2>, use 154
        // - Otherwise, use 54
        var menubarHeight = isTargetH2 ? 154 : 54;

        $('html, body').css("scrollTop", $target.offset().top - menubarHeight);
    });
});
0 голосов
/ 27 октября 2018

Во-первых, если вам просто нужно изменить scrollTop, вы можете использовать метод "css" вместо animate: 

.css({
        scrollTop:$(href).offset().top -menubarHeight
});

или 

.css("scrollTop", $(href).offset().top -menubarHeight);

Я не совсем поняла ваш вопрос! Хотите прокрутить заголовки (теги h2) по ссылке?

...