Есть ли способ прокрутить на якорь, а не переходить с помощью JavaScript (что-то вроде плавной прокрутки) - PullRequest
Новая
       2

Есть ли способ прокрутить на якорь, а не переходить с помощью JavaScript (что-то вроде плавной прокрутки)

2 голосов
/ 23 июня 2011

У меня большой документ с пронумерованными тегами привязки, как показано ниже.И текстовое поле для ввода чисел, чтобы перейти к привязке, которая использует window.location.hash

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

<a name="1">
some text
<a name="2">
some text
<a name="3">

вот моя функция 

function updatePageNumber()
{
    var pagenumber;
    pagenumber = document.getElementById('pageNumber').value;   
    window.location.hash =  pagenumber;
}

Прыжок на якорь очень уродлив, и люди теряют чувство направлениятекст.Так есть ли способ прокрутить на якорь с помощью JavaScript.Я знаю, что есть много примеров jQuery, но я не знаю jQuery и не смог найти JavaScript.

Самая важная причина в том, что я хочу видеть номер моей страницы в адресной строке!

Ответы [ 6 ]

15 голосов
/ 23 июня 2011

Добавить библиотеку jQuery.

Используйте следующий скрипт для плавной прокрутки к нужному элементу. 

jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);

target - идентификатор целевого элемента, а 1000 - продолжительность анимации.

1 голос
/ 05 июля 2013

Используйте этот код и наслаждайтесь 

$(document).ready(function(){
$("#btop").hide();  // replace only #btop with your <div id=" ">

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop()>100){
            $('#btop').fadeIn();  // replace only #btop with your <div id=" ">
        }
        else{
            $('#btop').fadeOut(); // replace only #btop with your <div id=" ">
        }
    });

    $('#btop a').click(function(){ // replace only #btop with your <div id=" ">
        $('body,html').animate({
          scrollTop:0
        },200);  // to speed up scroll replace 200 to 300 or 500
        return false;
    });
});
});
1 голос
/ 09 июля 2011
0 голосов
/ 23 июня 2011

Я знаю, что вы сказали, что не знаете jQuery, но вы все равно захотите использовать его для прокрутки. Вот простой пример того, как его можно использовать.

0 голосов
/ 23 июня 2011

В JavaScript нет встроенной плавной прокрутки, поэтому вам придется реализовать ее самостоятельно, но зачем изобретать колесо, если оно уже есть в jQuery и, вероятно, у вас его не будетдобавить более двух или трех строк кода?Просто скачайте jQuery и плагин ScrollTo , добавьте их в свой раздел <head> в теге <script>, а затем используйте его для прокрутки до элемента с заданным идентификатором: 

$.scrollTo("#my-element-id");

При этом будет выполнен переход к элементу с идентификатором my-element-id, поэтому в привязках необходимо использовать атрибут id=..., а не атрибут name=....

Если вы хотите автоматически добавить это поведение ко всемваши якоря в пределах данного div (или всей страницы), вы можете использовать плагин LocalScroll , который делает все это простым: 

$.localScroll();
0 голосов
/ 23 июня 2011

Возможно, вы захотите проверить этот урок или Google для "JS smooth scroll"

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

Похожие темы

...