Question

我刚刚使用jQuery获得了平滑的滚动代码。唯一的问题是哈希出现在我的URL的末尾。我看到我的域名和/＃首先出现在它之后。有没有办法删除它？

我和Joomla一起工作，这就是为什么$被jQuery取代了。

这是我的代码

jQuery(document).ready(function() {  
    jQuery('a[href^="#"]').click(function() {  
      var target = jQuery(this.hash);  
      if (target.length == 0) 
          target = jQuery('a[name="' + this.hash.substr(1) +     '"]');  
      if (target.length == 0) 
            target = jQuery('html');  
      jQuery('html, body').animate({ scrollTop: target.offset().top }, 1000);  
      return false;     
    });      
});

Answer 1

尝试以下方法：

＆＃13;

jQuery(document).ready(function() {  
   jQuery('a[href^="#"]').click(function(e) {
          //prevent appending the hash 
          e.preventDefault();

          var target = jQuery(this.hash);  
          if (target.length == 0) 
              target = jQuery('a[name="' + this.hash.substr(1) +     '"]');  
          if (target.length == 0) 
                target = jQuery('html');  
          jQuery('html, body').animate({ scrollTop: target.offset().top }, 1000);  
          return false;     
   });      
});

＆＃13;

Answer 2

Checkout This Snipest。这可能会有所帮助..

＆＃13;

$(".data-scroll").on('click', function(event) {
   if (this.hash !== "") {
     event.preventDefault();

     var hash = this.hash;
     $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 800, function(){
     window.location.hash = hash;
     });
   } 
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand data-scroll" href="#home">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#home" class="data-scroll">Home</a></li>
        <li><a href="#about" class="data-scroll">About</a></li>
        <li ><a href="#service" class="data-scroll">Service</a></li>
        <li><a href="#contact" class="data-scroll">Contact</a></li>
        
      </ul>
      
    </div>
  </div>
</nav>
  
<div class="container" id="home">
  <h3 style="margin-top:70px">Home Section</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

<div class="container " id="about">
  <h3  style="margin-top:70px">About Section</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

<div class="container" id="service">
  <h3 style="margin-top:70px">Service Section</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

<div class="container" id="contact">
  <h3 style="margin-top:70px">Contact Section</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

＆＃13;

Answer 3

$(".scroll").on("click", function () {

	var classname = $(this)[0].className;

	classname = classname.replace("scroll ", "");

	$('html, body').animate({
		scrollTop: $(".div." + classname).offset().top
	}, 2000);
});

.div {
  width: 100vw;
  height: 40em;
  background: skyblue;
  margin: 0.5em 0em;
}

.scroll {
  display: inline;
  background: #152a38;
  padding: 0.3em;
  color: white;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

	
	
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	
	
	<div class="scroll div1">div1</div>
	<div class="scroll div2">div2</div>
	<div class="scroll div3">div3</div>
	<div class="scroll div4">div4</div>
	
	<div class="div div1">Div1</div>
	<div class="div div2">Div2</div>
	<div class="div div3">Div3</div>
	<div class="div div4">Div4</div>
	
	
	
	
</body>
</html>

Answer 4

试试这个

 $(function() {
 $('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
  && location.hostname == this.hostname) {
   var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
   if (target.length) {
     $('html, body').animate({
      scrollTop: target.offset().top
    }, 1000);
     return false;
    }
   }
 });
});

Jquery使用哈希链接平滑滚动？

4 个答案: