Плавная прокрутка при нажатии на ссылку привязки - PullRequest
Новая
       57

Плавная прокрутка при нажатии на ссылку привязки

420 голосов
/ 10 октября 2011

У меня есть пара гиперссылок на моей странице.Часто задаваемые вопросы, которые пользователи прочтут, посетив мой раздел справки.

Используя ссылки привязки, я могу сделать прокрутку страницы в направлении привязки и направлять туда пользователей.

Есть ли способплавная прокрутка?

Но обратите внимание, что он использует собственную библиотеку JavaScript.Может быть, jQuery предлагает что-то подобное в выпечке?

Ответы [ 25 ]

3 голосов
/ 04 ноября 2017

Современные браузеры немного быстрее в наши дни. SetInterval может работать. Эта функция хорошо работает в Chrome и Firefox в наши дни. (Немного медленно в сафари, не беспокоился о IE) 

function smoothScroll(event) {
    if (event.target.hash !== '') { //Check if tag is an anchor
        event.preventDefault()
        const hash = event.target.hash.replace("#", "")
        const link = document.getElementsByName(hash) 
        //Find the where you want to scroll
        const position = link[0].getBoundingClientRect().y 
        let top = 0

        let smooth = setInterval(() => {
            let leftover = position - top
            if (top === position) {
                clearInterval(smooth)
            }

            else if(position > top && leftover < 10) {
                top += leftover
                window.scrollTo(0, top)
            }

            else if(position > (top - 10)) {
                top += 10
                window.scrollTo(0, top)
            }

        }, 6)//6 milliseconds is the faster chrome runs setInterval
    }
}
3 голосов
/ 24 августа 2018

Существует способ css сделать это с помощью scroll-поведения.Добавьте следующее свойство. 

    scroll-behavior: smooth;

И это все.JS не требуется. 

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

PS: пожалуйста, проверьте совместимость браузера.

3 голосов
/ 23 марта 2017

Ответ работает, но отключает исходящие ссылки.Ниже приведена версия с добавленным бонусом, облегчающая (размах) и учитывающая исходящие ссылки. 

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
3 голосов
/ 01 октября 2017

HTML 

<a href="#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

или с абсолютным полным URL 

<a href="https://somewebsite.com/#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

JQuery 

$j(function() {
    $j('a.smooth-scroll').click(function() {
        if (
                window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            &&  window.location.hostname == this.hostname
        ) {
            var target = $j(this.hash);
            target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $j('html,body').animate({
                    scrollTop: target.offset().top - 70
                }, 1000);
                return false;
            }
        }
    });
});
2 голосов
/ 01 ноября 2013

Добавление этого: 

function () {
    window.location.hash = href;
}

сводит на нет вертикальное смещение 

top - 72

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

Она добавляет хеш в конец URL, но нажатие назад не возвращает вас к вершине, оно просто удаляет хеш из URL и оставляет окно просмотра там, где оно находится.

Вот полный js, который я использую: 

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top - 120
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});
2 голосов
/ 22 декабря 2016

проверенный и проверенный код 

<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  jQuery('html, body').animate({
    scrollTop: jQuery(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if
});
});
</script>
2 голосов
/ 24 сентября 2016 
$("a").on("click", function(event){
    //check the value of this.hash
    if(this.hash !== ""){
        event.preventDefault();

        $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);

        //add hash to the current scroll position
        window.location.hash = this.hash;

    }



});
2 голосов
/ 25 февраля 2016

Это позволит jQuery легко распознавать целевой хеш и знать, когда и где остановиться. 

$('a[href*="#"]').click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
2 голосов
/ 12 февраля 2016

Это решение также будет работать для следующих URL-адресов без разрыва ссылок на разные страницы. 

http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor

./index.html
./index.html#anchor

и т. Д. 

var $root = $('html, body');
$('a').on('click', function(event){
    var hash = this.hash;
    // Is the anchor on the same page?
    if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
        $root.animate({
            scrollTop: $(hash).offset().top
        }, 'normal', function() {
            location.hash = hash;
        });
        return false;
    }
});

Я не проверял это во всех браузерах, пока что.

1 голос
/ 15 июля 2016

Никогда не забывайте, что функция offset () задает положение вашего элемента в документе.Поэтому, когда вам нужно прокрутить ваш элемент относительно его родителя, вы должны использовать это; 

    $('.a-parent-div').find('a').click(function(event){
        event.preventDefault();
        $('.scroll-div').animate({
     scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
     }, 500);       
  });

Ключевым моментом является получение scrollTop из scroll-div и добавление его в scrollTop.Если вы этого не сделаете, функция position () всегда выдает разные значения позиции.

Страница:
...