A HREF класс для прокрутки DIV

-3

У меня есть 5-10 ссылок все с того же класса/A HREF класс для прокрутки DIV

<a class="content-link" href="/profile/about-me/<? echo $row['username'];?>/">

То, что я пытаюсь достичь, когда пользователь нажимает на эту ссылку, то пользователь затем переместился на #profile-body div, используя javascript.

Очень похоже на это post однако единственное отличие состоит в том, что вместо того, чтобы в DIV, который я хочу пользователю осуществлять навигацию к в а HREF, как так <a href="#profile-body"> мне нужно, чтобы это было сделано с помощью JavaScript, так что связь у меня есть в href фактически загружается.

Заранее благодарю за любую помощь, которую вы можете предоставить.

источник

2016-12-20 Lewis Day

@Pete вас к месту на текущей странице и не беспокоиться о Thats ссылки просто загружено в DIV профиля тела :) –

@Pete нагрузки линии связи и пользователя берется в div :) –

@LewisDay Это просто противоречит вашему предыдущему комментарию. –

Я знаю, что вы ищете решение Javascript, но на всякий случай, если вы готовы использовать JQuery, это хороший вариант.

$(document).ready(function() { 
    $('.content-link').click(function(e) { 
    e.preventDefault(); 

    $('html, body').animate({ 
     scrollTop: $('#profile-body').offset().top 
    }, 500); 
    }); 
});

источник

2016-12-20 14:57:05

Ooops Я забыл прослушиватель событий, отредактировав свой ответ. –

спасибо! не знал, что это можно было бы легко добиться. будет отмечен как ответ в ближайшее время –

Но использование e.preventDefault() фактически блокирует загрузку нового URL-адреса. – Roberrrt

Там нет причин, чтобы использовать JQuery, хотя (если вы не используете его уже), это полный ваниль подход. Установка хэша необязательна.

В принципе, этот скрипт включен на новую страницу, вы устанавливаете хэш вручную, а затем просто переключаете offsetTop.

(function() { 
 
    window.location.hash = "three"; 
 
    document.getElementById('three').offsetTop + "px"; 
 
})();

div { 
 
    height: 250px; 
 
    margin-bottom: 10px; 
 
    background-color: #F00; 
 
}

<div id='one'>one</div> 
 
<div id='two'>two</div> 
 
<div id='three'>three</div>

источник

2016-12-20 14:59:50 Roberrrt

Простой способ сделать так с помощью JQuery:

$(".content-link").click(function() { 
    $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 400); 
});

При этом, у вас есть все ваши .content.link HREF контролем.

Во всяком случае, это стоит взглянуть на flesler/jquery.scrollTo

источник

2016-12-20 15:02:51 MarcM

Это также может быть сделано с чистого CSS.

body { 
 
    background: #999 
 
} 
 
.mylinks a { 
 
    text-decoration: none; 
 
    color: black; 
 
    display: inline-block; 
 
    padding: 2%; 
 
    background: #444; 
 
    color: #999; 
 
} 
 
.mycooldiv { 
 
    background: red; 
 
    width: 100%; 
 
    height: 400px; 
 
    margin-bottom: 30%; 
 
    box-shadow: inset 0 0 10px 200px rgba(0, 0, 0, 0.55); 
 
} 
 
#profile-section1 { 
 
    background: red; 
 
    bottom: 100% 
 
} 
 
#profile-section2 { 
 
    background: blue; 
 
    bottom: 200% 
 
} 
 
#profile-section3 { 
 
    background: green; 
 
    bottom: 300% 
 
} 
 
#profile-section4 { 
 
    background: yellow; 
 
    bottom: 400% 
 
}

<body> 
 
    <div class="mylinks"> 
 
    <a class="content-link" href="#profile-section1">section 1 </a> 
 
    <a class="content-link" href="#profile-section2">section 2 </a> 
 
    <a class="content-link" href="#profile-section3">section 3 </a> 
 
    <a class="content-link" href="#profile-section4">section 4 </a> 
 
    </div> 
 
    <div class="mycooldiv" id="profile-section1"></div> 
 
    <div class="mycooldiv" id="profile-section2"></div> 
 
    <div class="mycooldiv" id="profile-section3"></div> 
 
    <div class="mycooldiv" id="profile-section4"></div> 
 
</body>

источник

2016-12-20 15:19:36

A HREF класс для прокрутки DIV

ответ

Смежные вопросы