Изменение хэша при нажатии

Я использую функцию прокрутки для проекта, но как я могу сделать так, чтобы хеш отображался и в URL-адресе, когда мы щелкаем каждый из различных a [href = #]? Например, при нажатии кнопки «домой» происходит прокрутка до идентификатора содержимого страницы, который равен #home, но URL-адрес также имеет хеш-URL ... / # home.

   $(".scrollable").on('click', function(e) {
    e.preventDefault();
    var target = $(this.hash).offset() ? $(this.hash).offset().top : 0;
    var customoffset = 170;
    $('html, body').animate({
            scrollTop:target - customoffset
        }, 1000);
    });

jquery

07.12.2018 07:50

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 3

вам не нужно использовать jquery для этого, вы можете просто использовать html:

на теге a используйте # +the name of the tag вам что прыгать

<a href = "#heading">Click here to jump</a>
<a href = "#another-heading">Click here to jump</a>

<h2 id = "heading">Some Heading</h2>
<h2 id = "another-heading">Another Heading</h2>

пример с эффектом, необходимо протестировать локально, чтобы увидеть #hash:

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<style>
body { 
  font: 14px/2 Georgia, serif; 
}

    #page-wrap { 
      max-width: 500px; 
      margin: 1rem auto;
      padding: 1rem;
    }

    h1, h2 {
      line-height: 1.2;
    }

    p, ul, h1 { 
      margin: 0 0 1rem 0; 
    }
    </style>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
    // Select all links with hashes
    $('a[href* = "#"]')
      // Remove links that don't actually link to anything
      .not('[href = "#"]')
      .not('[href = "#0"]')
      .click(function(event) {
        // On-page links
        if (
          location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') 
          && 
          location.hostname == this.hostname
        ) {
          // Figure out element to scroll to
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          // Does a scroll target exist?
          if (target.length) {
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000, function() {
              // Callback after animation
              // Must change focus!
              var $target = $(target);
              $target.focus();
              if ($target.is(":focus")) { // Checking if the target was focused
                return false;
              } else {
                $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                $target.focus(); // Set focus again
              };
            });


     }
    }
  });
</script>
</head>

<body>
<div id = "page-wrap">

  <h1 id = "top">Smooth Page Scrolling</h1>

  <ul>
    <li><a href = "#two">Scroll to Section Two</a></li>
    <li><a href = "#three">Scroll to Section Three</a></li>
  </ul>

  <h2 id = "one">Section One</h2>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <h2 id = "two">Section Two</h2>

  <p><a href = "#top">Top</a></p>

  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <h2 id = "three">Section Three</h2>

  <p><a href = "#top">Top</a></p>

  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

  <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
    sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
    tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>

</div>
</body>

</html>

yaya на самом деле я уже пробовал, но у него нет эффекта анимированной прокрутки ммм

— 07.12.2018 08:28

@xx_secretpooh что-то вроде этого css-tricks.com/snippets/jquery/smooth-scrolling/…?

— 07.12.2018 08:32

yaya :) если сделать это так, он не может показать #hash, потому что проблема теперь я хочу показывать хеш в URL-адресе при нажатии :(

— 07.12.2018 08:33

@xx_secretpooh #hash будет работать, но в примере не может работать, потому что он похож на iframe, просто попробуйте;) Я помещаю полный пример, просто создайте .html для тестирования на локальном

— 07.12.2018 08:40

07.12.2018 08:02

Если вам не нужен хэштег в URL-адресе, вы можете использовать для этого API истории.

history.replaceState({}, document.title, ".");

07.12.2018 08:15

Прокрутка с анимацией

$(document).ready(function(e) {
	
	$('a[href^ = "#"]').on('click', function(event) {
        var target = $(this.getAttribute('href'));
        if (target.length) {
            event.preventDefault();
            $('html, body').stop().animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });
    });

.testbox .nav{position:fixed; width:100%; top:0; left:0; background:#fff;}
.testbox .nav a{border:1px solid #ccc; margin:5px 10px; display:inline-block; padding:5px}
.testfld div{width:100%; background:#063; padding:300px 0; color:#fff; text-align:center; border:2px solid #fff;}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "testbox">
<div class = "nav">
<a class = "scrollable" href = "#a1" >A1 Box</a>
<a class = "scrollable" href = "#a2" >A2 Box</a>
<a class = "scrollable" href = "#a3" >A3 Box</a>
<a class = "scrollable" href = "#a4" >A4 Box</a>
</div>
<div class = "testfld">
<div id = "a1">A1 Box</div>
<div id = "a2">A2 Box</div>
<div id = "a3">A3 Box</div>
<div id = "a4">A4 Box</div>
</div>
</div>

07.12.2018 08:41

Другие вопросы по теме

Регулярное выражение для возврата только строки между фигурными скобками на последнем уровне

Удаление атрибута тега заголовка с карты Google

Ограничение количества div, возвращаемых из .find ()

Данные JSON не отображаются на веб-странице

Шаблонные литералы, работающие в другом браузере, кроме IE

Модально как ViewComponent, не отображающий данные

Как запустить другую функцию после получения данных из ajax, когда время обработки ajax достаточно велико

Объединенная строка из php в js с использованием ajax

Почему навигация по вкладкам не удалась и выдает ошибку в консоли

Флажок отмечен Все

Изменение хэша при нажатии

Ответы 3

Другие вопросы по теме

Похожие вопросы